如何通过我的 api 调用绕过 CORS 限制？ [复制]

Posted 2023-02-22

【中文标题】如何通过我的 api 调用绕过 CORS 限制？ [复制]

【英文标题】：How can I get around CORS restrictions with my api calls? [duplicate]

【发布时间】：2019-10-20 20:53:08

【问题描述】：

我一直在开发个人堡垒之夜统计网络应用程序。我使用了两个主要的 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",

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

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

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

这就是开发中发生的事情，这就是我添加代理的原因。

我还添加了 mode: 'no-cors' 和其他允许原始键到标题，但它仍然不起作用。

在网络标签中：

请求网址：https://api.fortnitetracker.com//v1/profile/pc/popps01 请求方法：选项 状态码：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 Mobile/15A372 Safari/604.1

【问题讨论】：

fetch 已经返回承诺，为什么还要将它包装在另一个承诺中？

您需要使用***.com/posts/56458898/edit 编辑/更新问题并添加有关“仍然无法工作”的确切含义的信息。浏览器在 devtools 控制台中记录的确切错误消息是什么？响应的 HTTP 状态码是什么？使用浏览器开发工具中的网络窗格进行检查。是 4xx 还是 5xx 错误而不是 200 OK 成功响应？

它是从树下的子组件调用的。提取工作正常，尽管我在网络选项卡中看不到标头值......同样，当它成功时，它会使用第一个结果中的 accountId 调用另一个 Fetch

您调用的服务器必须添加适当的标头。如果服务器没有添加它们，他们不希望您访问他们的服务器。尊重这个愿望可能是个好主意。只需在本网站上搜索“所请求的资源上不存在‘Access-Control-Allow-Origin’标头”，您就会发现数以千计的其他问题...

感谢 Heretic，如果我设置一个快速后端并以这种方式发送请求会怎样。我可以发送标头吗...

【参考方案1】：

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

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

【参考方案2】：

两种方法：

为 Access-control-allow-origin 安装 chrome 扩展以允许跨域重定向。 如果您的后端服务器在本地计算机上，则允许扩展

如果后端服务器是您的（您的本地主机），请将访问控制允许来源设置为“*”。

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

CORS_ORIGIN_ALLOW_ALL = True

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

CORS_ORIGIN_WHITELIST = ('*', )

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

【讨论】：

谢谢，但它用于生产和在 aws 上，我的本地扩展不会绕过用户访问该站点。我将在本地做一个后端并尝试这种方式

编辑过的答案，如果你在后端使用 Django。