`mode: 'no-cors'` 失败时，如何使用 Fetch 访问不同来源的资源？

尝试使用 Fetch with mode: no-cors

在本文中，我们将解决使用 fetch with mode 的问题： “no-cors”并探索禁用 CORS 的可行替代方案。

了解问题

当尝试从不同来源访问资源（例如外部 API）时，浏览器会实施称为同源策略的安全措施。此策略可防止 JavaScript 代码直接访问其他来源的资源，除非服务器使用适当的 CORS 标头进行响应。

当您遇到错误“请求的资源上不存在“Access-Control-Allow-Origin”标头时，”这意味着您尝试从中获取数据的服务器不允许从您当前的来源访问其资源。

禁用CORS

需要注意的是，在获取请求中设置 mode: 'no-cors' 实际上并不会禁用 CORS。相反，它会阻止您的前端 JavaScript 代码访问响应正文和标头。在大多数情况下，这不是您想要做的。

使用 CORS 代理

推荐的解决方案是使用 CORS 代理。 CORS 代理充当前端代码和目标服务器之间的中介。它向目标服务器发出请求，接收响应，添加必要的 CORS 标头，然后将修改后的响应传递回前端代码。这允许您的前端代码访问资源，而不会直接违反同源策略。

部署您自己的 CORS 代理

您可以按照以下步骤轻松部署您自己的 CORS Anywhere 代理：

1. 克隆 CORS Anywhere 存储库：git clone https://github.com/Rob--W/cors-anywhere.git
2. 切换到cors-anywhere目录：cd cors-anywhere/
3. 安装依赖：npm install
4. 创建 Heroku 应用程序：heroku create
5. 将代码推送到 Heroku：git push heroku master

完成这些步骤后，您将拥有在 Heroku 上运行的自己的 CORS Anywhere 服务器。

使用 CORS 代理

要使用您的 CORS 代理，只需在您的请求 URL 前面添加代理 URL，例如：

https://cryptic-headland-94862.herokuapp.com/https://example.com

通过使用 CORS 代理，您可以绕过同源策略并在前端代码中访问不同来源的资源。

以上是`mode: 'no-cors'` 失败时，如何使用 Fetch 访问不同来源的资源？的详细内容。更多信息请关注PHP中文网其他相关文章！