Hallo,
ich arbeite gerade an einer Web-Anwendung mit Java Backend. Daten werden mit REST ausgeliefert und von einer Angular.js Webanwendung dargestellt. Da mein REST-Service auf Port 8080 läuft, meine Web-Anwendung aber nicht, Verweigert der Browser natürlich den Cross-Domain Zugriff. Produktiv möchte ich die beiden Dienste natürlich über den selben Port laufen lassen, zum Entwickeln würde ich aber gerne CORS (Cross Origin Resource Sharing) aktivieren.
Ich gehe nicht davon aus, dass es an meinem Backend liegt, aber der Vollständigkeit halber hier der Code.
REST-Service:
@Path("/vortraege")
public class VortragFacadeREST extends AbstractFacade<Vortrag> {
@PersistenceContext(unitName = "RESTfulPU")
private EntityManager em;
public VortragFacadeREST() {
super(Vortrag.class);
}
@POST
@Override
@Consumes({"application/xml", "application/json"})
public void create(Vortrag entity) {
super.create(entity);
}
@PUT
@Path("{id}")
@Consumes({"application/xml", "application/json"})
public void edit(@PathParam("id") Long id, Vortrag entity) {
super.edit(entity);
}
@DELETE
@Path("{id}")
public void remove(@PathParam("id") Long id) {
super.remove(super.find(id));
}
@GET
@Path("{id}")
@Produces({"application/xml", "application/json"})
public Vortrag find(@PathParam("id") Long id) {
return super.find(id);
}
@GET
@Override
@Produces("application/json")
public List<Vortrag> findAll() {
return super.findAll();
}
@GET
@Path("{from}/{to}")
@Produces({"application/xml", "application/json"})
public List<Vortrag> findRange(@PathParam("from") Integer from, @PathParam("to") Integer to) {
return super.findRange(new int[]{from, to});
}
@GET
@Path("count")
@Produces("text/plain")
public String countREST() {
return String.valueOf(super.count());
}
@Override
protected EntityManager getEntityManager() {
return em;
}
}
RequestFilter:
public class RequestFilter implements ContainerRequestFilter {
@Override
public void filter(ContainerRequestContext requestContext) throws IOException {
requestContext.getHeaders().add("Access-Control-Allow-Origin", "*");
requestContext.getHeaders().add("Access-Control-Allow-Headers", "Authorization");
}
}
ResponseFilter:
public class ResponseFilter implements ContainerResponseFilter {
@Override
public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {
responseContext.getHeaders().add("Access-Control-Allow-Origin", "*");
responseContext.getHeaders().add("Access-Control-Allow-Headers", "Authorization");
requestContext.getHeaders().add("Access-Control-Allow-Origin", "*");
requestContext.getHeaders().add("Access-Control-Allow-Headers", "Authorization");
}
}```
Im Requestfilter und Responsefilter habe ich die Access-Control-Allow-Origin Header hinzugefügt, im Browser kommen Sie auch an.
Diese Daten möchte ich jetzt mit Angular.js abrufen, dafür erstelle ich mir erst einen Service "VortragFactory".
```html
vortragApp.factory('VortragFactory', function($resource) {
return $resource('http://localhost:8080/RESTful/webresources/vortraege/:id', {}, {
query: {method: 'GET', isArray: true},
create: {method: 'POST'},
show: {method: 'GET', params: {id: '@id'}},
update: {method: 'PUT', params: {id: '@id'}},
delete: {method: 'DELETE', params: {id: '@id'}}
});
});
Diesen Service injiziere ich in meinen Controller und weise ihn in meinem Scope “vortraege” zu.
vortragApp.controller('VortragCtrl', function($scope, VortragFactory) {
$scope.vortraege = VortragFactory.query();
});
Um CORS Clientseitig zu aktivieren habe ich noch diese Config hinzugefügt, welche ich so immer wieder als Snippet gefunden habe:
vortragApp.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
Mein Browser versucht zwar die Verbindung herzustellen, als Antwort bekomme ich aber nur:
XMLHttpRequest cannot load http://localhost/RESTful/webresources/vortraege. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8383' is therefore not allowed access.
Ich würde jetzt daraus schließen, dass das Client-Seitige Aktivieren von CORS nicht funktioniert hat? Ich bin bei Angular noch ziemlich neu, deshalb vermute ich, dass ich hier etwas übersehe? Hat jemand von euch diese Konstellation schonmal ans Laufen bekommen?
Viele Grüße,
Tim
Edit: Natürlich, es ist ein Bug. Der Port wird im Anfragestring als Variable interpretiert und nicht als Port. Wenn ich im Service die URL abändere in http://localhost:8080\:8080/RESTful/webresources/vortraege, funktioniert es anstandslos.