JavaScript获取数据时出现跨域请求错误，如何解决？

尝试通过 Fetch 禁用 CORS 并处理“Access-Control-Allow-Origin”

您遇到了一个常见的挑战：尝试使用 Fetch 从客户端 JavaScript 代码发出跨源请求。您收到的错误消息表明您尝试提取的端点不包含跨源访问所需的“Access-Control-Allow-Origin”标头。

问题： 您尝试在 Fetch 中使用 object { mode: 'no-cors' } 来禁用 CORS，但这种方法是不正确。

为什么“no-cors”模式不起作用：

设置模式：Fetch 中的“no-cors”不会禁用 CORS；相反，它告诉浏览器阻止前端 JavaScript 访问响应正文和标头。此设置通常是不可取的，因为您通常希望代码能够访问响应。

解决方案：CORS 代理

此问题的解决方案在于使用 CORS 代理。 CORS 代理充当前端代码和远程端点之间的中介，通过修改响应标头来启用跨源请求。

通过使用 CORS 代理，您可以通过代理转发您的请求，这将添加响应中必需的 Access-Control-Allow-Origin 标头。这允许您的前端代码访问响应正文和标头，就像它们来自同一来源一样。

部署您自己的代理

部署您的代理的简单方法自己的 CORS 代理是按照以下步骤操作：

1. 克隆 cors-anywhere GitHub 存储库(https://github.com/Rob--W/cors-anywhere)。
2. 使用 npm install 安装依赖项。
3. 创建 Heroku 帐户并运行 heroku create。
4. 使用 git push heroku master 将您的代码推送到 Heroku。

部署后，您将拥有一个正在运行的 CORS代理位于 https://cryptic-headland-94862.herokuapp.com 之类的 URL。

在请求 URL 前添加代理 URL

要使用代理，只需在您的请求 URL 前加上代理 URL 即可。例如，如果您想获取 https://example.com，则可以使用以下 URL：

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

通过在请求 URL 中添加代理前缀，您将能够成功发出跨源请求，这要归功于由代理添加的 Access-Control-Allow-Origin 标头代理。

其他注意事项：

• Postman 可以访问端点，因为它是一个忽略同源限制的调试工具。
• 在 Fetch 中使用 mode: 'no-cors' 或 mode: 'opaque' 不是正确的方法禁用 CORS。
• CORS 是一项安全措施，重要的是不要随意绕过它。在禁用 CORS 限制之前，请务必考虑安全影响。

以上是JavaScript获取数据时出现跨域请求错误，如何解决？的详细内容。更多信息请关注PHP中文网其他相关文章！