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 代理是按照以下步骤操作:
- 克隆 cors-anywhere GitHub 存储库(https://github.com/Rob--W/cors-anywhere)。
- 使用 npm install 安装依赖项。
- 创建 Heroku 帐户并运行 heroku create。
- 使用 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中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...
