Question

试图解决这个问题我已经精疲力尽了。

我正在http://localhost:3000下的本地计算机上运行React.js，并且尝试使用fetch方法从http://api.population.io:80/1.0/countries加载一些数据

根据API所有者的说法：“标准响应格式是带有跨域请求的CORS的JSON（应用程序/ json）。”

我已经尝试了标头的各种组合，而我现在所拥有的是这种设置：

fetch("http://api.population.io:80/1.0/countries",{
    method: 'GET',
    mode: 'cors',
    headers: new Headers({
        "Content-Type": "application/json",
        'Access-Control-Allow-Origin':'*'
    })
})

根据Chrome，正在通过请求发送以下标头：

Access-Control-Request-Headers: access-control-allow-headers,access-control-allow-origin,content-type
Access-Control-Request-Method: GET
Origin: http://localhost:3000
Referer: http://localhost:3000/reports
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

但是，当然，服务器返回带有以下消息的403状态代码：

无法加载http://api.population.io/1.0/countries：响应预检请求未通过访问控制检查：否请求中存在“ Access-Control-Allow-Origin”标头资源。因此，不允许原点“ http://localhost:3000” 访问。响应的HTTP状态码为403。如果响应不透明满足您的需求，将请求的模式设置为“ no-cors”以获取禁用了CORS的资源。

我知道chrome插件可以使我解决此问题，但这并不理想，我担心我不知道该怎么办，我一直在努力解决这一问题，最后我尝试了几乎所有我能找到的东西后，凌晨4点放弃了。

如果有人聪明到能启发我，我一定会非常感激的，我什至愿意为您运送一堆啤酒，以帮助我解决这个问题。

Answer 1

CORS标头是需要在服务器响应中正确设置的标头。您无法通过在请求中提供更多标头来使CORS正常工作。在响应不成功的情况下（例如，您正在获得403响应），响应会忽略CORS标头并不少见。

因此，您需要弄清楚为什么响应不成功以及为什么它不包含CORS标头。无论哪种方式，您都无法在请求中发送更多的CORS标头来解决该问题。

Answer 2

问题在于，在CORS模式下完成的标准OPTIONS请求上的提取失败。您可以通过访问浏览器上的链接http://api.population.io/1.0/countries并按下按钮OPTIONS进行确认，您获得的响应与在CORS模式下访问时获得的响应相同。

您应该在服务器上解决此问题。

编辑：此外，问题似乎在于域api.population.io正在重定向到CloudFront，并且如消息所示，CDN仅支持可缓存的请求。似乎是通过作为CDN服务的CloudFront绕过Django REST API的架构决策的结果。

如果该请求是在没有CORS及其先前的OPTIONS请求的情况下进行的，则它将起作用。

API提取失败，请求的资源上没有“ Access-Control-Allow-Origin”标头

2 个答案: