Angular and CORS

Question

I am writting app with angular 1.2 and I am trying to call to REST API on local glassfish 3.1. I am calling right that:

app.factory("shopModel", function($resource){
return $resource('http://localhost:8080/Schedule-service/shops', {}, {
    query: 
    {method:'GET', 
        headers: {'Content-Type': 'application/json'} 
        params:{}}

    });
});

But I get an error in my chrome.

XMLHttpRequest cannot load http://localhost:8080/Schedule-service/shops. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

I added to my app config this code but this haven't helped:

app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

I don't know what to do. I will by thankful for every tip.

Edit. I added headers_module to my apache wamp. And I added to my httpd.conf file this:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin: *
</IfModule>

But still don't work. Any suggestions??

Edit2. Ok I resolve It. I've added this filter to my Spring web:

 public class CorsFilter extends OncePerRequestFilter {

 @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
            throws ServletException, IOException {
    response.addHeader("Access-Control-Allow-Origin", "*");
    response.addHeader("Access-Control-Allow-Methods",
            "GET, POST, PUT, DELETE, OPTIONS");
    response.addHeader("Access-Control-Allow-Headers",
            "origin, content-type, accept, x-requested-with, sid, mycustom, smuser");
        filterChain.doFilter(request, response);
    }
}

Thanks Quentin.

can you please explain a little how you resolved your error i m having similar issue tried https.conf solution, htaccess solution but none worked, I am using wamp server with headers_module enabled. — Abhishek Sachan, Jan 04 '15 at 14:11
Please, where do I add the CORS Filter class? Can i make my Application class extend it? — Idee, Apr 19 '17 at 09:58

score 3 · Accepted Answer · answered Dec 14 '13 at 15:50

3

You need to specify Access-Control-Allow-Origin: * on the server you are making the request to (i.e. the glassfish server), not the server hosting the page the request is coming from.

For Alice to access Bob's server, Bob has to grant permission. It would defeat the purpose if Alice could do it.

answered Dec 14 '13 at 15:50

Quentin

914,110
126
1,211
1,335

I checked in debuugger if I make HTTP GET than method in REST is called. But nothing is returned to JS. – user2239655 Dec 14 '13 at 16:24
Yes, that is what `XMLHttpRequest cannot load http://localhost:8080/Schedule-service/shops. No 'Access-Control-Allow-Origin' header is present on the requested resource.` is telling you. You have to add that header to the response. – Quentin Dec 14 '13 at 16:24
Meta-comment: CORS is actually to protect the **client**, not the server. It stops malicious scripts from accessing other resources, unless those resources specifically allow access from the malicious script's domain. [See here](http://security.stackexchange.com/questions/8264/why-is-the-same-origin-policy-so-important). Alice can still get to Bob's server easily, even with AJAX, if she disables her client-side security! – Hylianpuffball Dec 14 '13 at 18:49
More specifically, the Same Origin Policy is there to protect the shared trust between the user of the client and the owner of the server. CORS is a way for the server to state that the data does not need that protection. – Quentin Dec 14 '13 at 18:55

score 1 · Answer 2 · answered Dec 14 '13 at 13:23

1

deploy your html file to the server you are running or set header Access-Control-Allow-Origin "http://localhost" to your web server configuration.

answered Dec 14 '13 at 13:23

erdimeola

844
8
17

I am using wamp server. Do you know in which config file I have to add this header?? – user2239655 Dec 14 '13 at 13:35
I haven't used wamp server. take a look at this question. http://stackoverflow.com/questions/7564832/how-to-bypass-access-control-allow-origin – erdimeola Dec 14 '13 at 14:00

Angular and CORS

2 Answers2

Linked