Question

我一直在开发个人要塞统计网站应用程序。我使用两个主要的API调用。其中之一已启用CORS访问策略，因此在开发方面，我可以通过将域添加为代理并在获取请求中添加路径来解决此问题。

构建此文件时，无法调用API，因此尝试在获取请求中发送完整的URL，并添加标头，模式等，以尝试满足CORS策略。我已经尝试了一切，但仍然无法正常工作。

有人可以帮忙吗？

谢谢

app.js级别


fetchFortniteData = username => {
    return new Promise((resolve, reject) => {
      fetch(`/v1/profile/pc/${username}`, {
        headers: new Headers({
          'TRN-Api-Key': process.env.REACT_APP_TRN
        })
      })

package.json

 "proxy": "https://api.fortnitetracker.com",

我从控制台收到的错误是：

从原点“ https://api.fortnitetracker.com//v1/profile/pc/popps01”到“ http://localhost:3000”的获取操作已被CORS策略阻止：对预检请求的响应未通过访问控制检查：否“ Access-Control-Allow-来源的标头出现在请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”以在禁用CORS的情况下获取资源。

2fortniteApi.js：57选项https://api.fortnitetracker.com//v1/profile/pc/popps01 404

开发中正在发生什么，这就是为什么我添加了代理。

我还添加了以下模式：'no-cors'和其他允许标头使用原始键，但是它仍然无法正常工作。

在“网络”标签中：

请求网址：https://api.fortnitetracker.com//v1/profile/pc/popps01 请求方法：OPTIONS 状态码：404 远程地址：[2606：4700：20 :: 6819：9810]：443 推荐人政策：降级时不推荐人显示临时标题访问控制请求标头：trn-api-key 访问控制请求方法：GET 来源：http://localhost:3000 推荐人：http://localhost:3000/ 用户代理：Mozilla / 5.0（iPhone； CPU iPhone OS 11_0，例如Mac OS X）AppleWebKit / 604.1.38（KHTML，例如Gecko）版本/11.0移动版/ 15A372 Safari / 604.1

Answer 1

对于以后遇到此问题的任何人，如果您创建Express应用后端，并且不添加任何绕过API cors策略的cors。在开发中，您需要做的就是添加一个代理，但是，在无法正常工作的生产环境中，请设置Express后端，将您的前端端点指向后端REST请求。

我还将后端托管在Elastic Beanstalk，s3的前端和CloudFront上，并且可以正常工作。

Answer 2

两种方法：

在Access-control-allow-origin上安装chrome扩展，以允许跨域重定向。如果您的后端服务器位于本地计算机上，扩展名将允许
如果后端服务器是您的（您的本地主机），则将访问控制允许源设为“ *”。

这是允许cors的默认django服务器设置（设置文件）：

CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOW_METHODS = (
        'GET',
        'POST',
        'PUT',
        'OPTIONS',
    )

CORS_ORIGIN_WHITELIST = ('*', )

在制作服务器之前，请记住这一点。

如何通过API调用解决CORS限制？

2 个答案: