0

0

javascript跨域请求如何实现_CORS是什么?

夜晨

夜晨

发布时间:2026-01-09 18:27:08

|

558人浏览过

|

来源于php中文网

原创

cors是浏览器强制执行的安全机制,由后端通过响应头(如access-control-allow-origin)控制,前端无法开启或绕过;它仅决定js能否读取响应,而非阻止请求发送。

javascript跨域请求如何实现_cors是什么?

什么是 CORS?它不是前端能“实现”的东西

CORS(Cross-Origin Resource Sharing)是浏览器强制执行的一套安全机制,本质是一组 HTTP 响应头(如 Access-Control-Allow-Origin),由后端服务器在响应中主动设置。前端发请求时无法“开启”或“绕过”CORS —— 它只决定“浏览器是否允许 JS 读取响应内容”。如果后端没配好这些头,fetchXMLHttpRequest 就会抛出 TypeError: Failed to fetch 或控制台显示 Blocked by CORS policy,但请求本身(预检或实际请求)可能已发到服务端。

为什么加了 mode: 'no-cors' 还是拿不到数据?

mode: 'no-cors' 是唯一能让浏览器不校验 CORS 的方式,但它有严格限制:只能发“简单请求”(GET/POST/HEAD,且仅允许 Content-Type: text/plainapplication/x-www-form-urlencodedmultipart/form-data),且 JS **完全无法读取响应体或状态码** —— 返回的 Response 对象是“opaque”的,response.ok 永远为 falseresponse.json() 会直接报错。它只适用于“发完就不管”的埋点、日志上报等场景。

  • 不要用它来尝试“绕过 CORS 获取数据”
  • 它不会让跨域请求变成功,只是让浏览器不拦你发请求
  • 真正需要数据交互,必须后端配合返回合法 CORS 头

前端能做的有限但关键操作

前端不能决定 CORS 是否生效,但可以避免触发不必要的预检(OPTIONS 请求),减少一次网络往返:

拍我AI
拍我AI

AI视频生成平台PixVerse的国内版本

下载
  • 只用 GET/POST 方法,避免 PUT/DELETE/ PATCH
  • 不手动设置危险请求头,如 AuthorizationContent-Type: application/jsonX-Requested-With
  • 如果必须传 JSON,后端需支持预检并返回 Access-Control-Allow-Headers: Content-Type
  • 需要携带 cookie 时,前后端都要配:credentials: 'include' + 后端设 Access-Control-Allow-Credentials: true + Access-Control-Allow-Origin 不能为 *(必须指定具体域名)
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ id: 123 }),
  credentials: 'include'
})

常见错误现象和对应检查点

看到 No 'Access-Control-Allow-Origin' header is present,先别改前端代码:

立即学习Java免费学习笔记(深入)”;

  • 打开浏览器 Network 面板,看响应 Headers 里有没有 Access-Control-Allow-Origin
  • 如果是预检失败(OPTIONS 返回 404 或无 CORS 头),说明后端没处理 OPTIONS 路由或没返回 Access-Control-Allow-Methods
  • 如果响应头有 Access-Control-Allow-Origin: * 但带了 credentials: 'include',浏览器会拒绝 —— 此时后端必须写死域名,比如 https://your-app.com
  • 本地开发时用 localhost:3000 访问 localhost:8000端口不同即跨域,和是否同主机无关

最常被忽略的是:CORS 是浏览器的事,curl、Postman、后端调用完全不受影响 —— 所以问题一定出在响应头缺失或不匹配,而不是前端“请求写错了”。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

452

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

546

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

327

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

81

2025.09.10

软件测试常用工具
软件测试常用工具

软件测试常用工具有Selenium、JUnit、Appium、JMeter、LoadRunner、Postman、TestNG、LoadUI、SoapUI、Cucumber和Robot Framework等等。测试人员可以根据具体的测试需求和技术栈选择适合的工具,提高测试效率和准确性 。

453

2023.10.13

resource是什么文件
resource是什么文件

Resource文件是一种特殊类型的文件,它通常用于存储应用程序或操作系统中的各种资源信息。它们在应用程序开发中起着关键作用,并在跨平台开发和国际化方面提供支持。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

174

2023.12.20

cookie
cookie

Cookie 是一种在用户计算机上存储小型文本文件的技术,用于在用户与网站进行交互时收集和存储有关用户的信息。当用户访问一个网站时,网站会将一个包含特定信息的 Cookie 文件发送到用户的浏览器,浏览器会将该 Cookie 存储在用户的计算机上。之后,当用户再次访问该网站时,浏览器会向服务器发送 Cookie,服务器可以根据 Cookie 中的信息来识别用户、跟踪用户行为等。

6491

2023.06.30

document.cookie获取不到怎么解决
document.cookie获取不到怎么解决

document.cookie获取不到的解决办法:1、浏览器的隐私设置;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代码错误;5、Cookie不存在或过期等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

366

2023.11.23

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

0

2026.03.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.7万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.2万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号