Question

我需要从我的反应应用程序访问远程托管的web api。在服务器端，我在下面做了以允许跨域通信：

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();
}

当我从邮递员检查时，我可以看到正确设置的cors标题如下：

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

但是当我从react app访问同一个端点时，浏览器开始抱怨以下错误：

无法加载Fetch API http://myservices.com/myservice-app/services/。回应预检请求未通过访问控制检查：否＆＃39;访问控制允许来源＆＃39;标题出现在请求的上资源。起源＆＃39; http://localhost:3000＆＃39;因此是不允许的访问。如果不透明的响应满足您的需求，请设置请求模式为＆＃39; no-cors＆＃39;获取已禁用CORS的资源

有什么想法在这里发生？

编辑＃1 以下更改仍然看到相同的错误：

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();

Answer 1

我对您使用的Java库没有任何经验，但是这样的东西必须有效：

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

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

如果图书馆的工作方式与我认为的一样，则会在您发送到服务器的每个200 OK请求中发送OPTIONS，标题为Access-Control-Allow-Origin = * 。这就是你应该瞄准的目标。

无法设置＆＃39; Access-Control-Allow-Origin＆＃39;头

1 个答案: