unable to set 'Access-Control-Allow-Origin' header

Question

I need to access my web api hosted remotely from my react app. On the server side i did below to allow cross domain communication:

import javax.ws.rs.core.Response;
import com.mypackage.ResponseDto;

@Override
public Response fetch(String id, String env) throws ServiceException
{ 
     ResponseDto res = new ResponseDto();
     res = updateResp(id, env); // not important

     return Response.ok().header("Access-Control-Allow-Origin","*").entity(res).build();
}

When i check from postman i can see cors header correctly set as below:

access-control-allow-origin →*
content-type →application/json
date →Wed, 16 Aug 2017 11:07:16 GMT
server →web
transfer-encoding →chunked

But when i access the same endpoint from react app, browsers starts complaining with below error:

Fetch API cannot load http://myservices.com/myservice-app/services/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled

Any idea whats going on here?

Edit#1 Did below change still see the same error:

return Response.ok()
            .header("Access-Control-Allow-Origin", "*")
            .header("Access-Control-Allow-Methods", "POST, GET, PUT, UPDATE, OPTIONS")
            .header("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With")
            .entity(response).build();

The header needs to be added to the response to an OPTIONS request(which is what a browser will send as this 'preflight' request), not (just) GET or POST. Maybe that's the problem? — Karl Reid, Aug 16 '17 at 11:39
How does the response of the server look like when it receives a OPTIONS request, this is send before the next request — Ferrybig, Aug 16 '17 at 11:42
Possible duplicate of ["No 'Access-Control-Allow-Origin' header is present on the requested resource"](https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource) — Ferrybig, Aug 16 '17 at 11:43
I don't think the edit would really help, if you are still just setting those headers on non-OPTIONS requests. It's not obvious from the code you posted where `fetch` is being called from. Have a read of [this](https://stackoverflow.com/questions/23450494/how-to-enable-cross-domain-requests-on-jax-rs-web-services) answer for some useful info on enabling CORS in your environment. — Karl Reid, Aug 16 '17 at 12:00
Are you certain it’s not just that your browser has a stale copy that was cached before you added the response headers? Try clearing your browser cache, and check the Network tab in your browser devtools to see whether the browser is loading it from its cache — sideshowbarker, Aug 16 '17 at 14:17
As far a checking with postman, you need to test by sending an OPTIONS request, because your browser is doing a CORS preflight OPTIONS before making the actual request you want to send. You also need to make sure you’re sending an `Origin` request header when you test, and that you’re sending the `Content-Type: application/json` request header. I don’t know the details on how to do those with postman, but using curl, it looks like this: `curl -X OPTIONS -i -H "Origin: http://localhost:3000/" -H "Content-Type: application/json" http://myservices.com/myservice-app/services/` — sideshowbarker, Aug 16 '17 at 14:24

score 0 · Answer 1 · answered Aug 16 '17 at 14:31

I have no experience with whatever Java library you're using, but something like this must work:

@Override
public Response options() throws ServiceException
{ 
     ResponseDto res = new ResponseDto();

     return Response.ok().header("Access-Control-Allow-Origin","*").entity(res).build();
}

If the library works like I think it does, this will send a 200 OK on every OPTIONS request you send to your server, with header Access-Control-Allow-Origin = *. That's what you should be aiming for.

This works only if the api does not involve any custom headers(like origin, content-type, accept, authorization), for api calls with some custom headers this wont work — bluefalcon, Aug 17 '17 at 07:22

unable to set 'Access-Control-Allow-Origin' header

1 Answers1