CORS与JSONP区别详解：跨域请求解决方案

哈喽！今天心血来潮给大家带来了《JavaScript跨域请求：CORS与JSONP区别解析》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

这是浏览器主动拦截的跨域请求，因服务端未返回Access-Control-Allow-Origin等CORS响应头；fetch请求已发出且可能返回200，但浏览器在解析响应时直接拒绝，不进入Promise链。

为什么 fetch 会报 “No 'Access-Control-Allow-Origin' header” 错误

这是浏览器主动拦截的跨域请求，不是 JavaScript 报错，也不是网络失败，而是服务端没返回正确的 CORS 响应头。核心问题在于：浏览器只允许同源请求读取响应体，除非服务端明确声明允许跨域访问。

常见表现：fetch('https://api.example.com/data') 发出去了（Network 面板能看到 200），但控制台报错、then() 不触发、catch() 捕不到错误——因为根本没进入 Promise 链，是浏览器在解析响应时直接拒绝。

• CORS 是服务端配合的方案，客户端只需正常发请求（如 fetch 或 XMLHttpRequest）
• 预检请求（OPTIONS）会在发送 POST 带自定义 header、Content-Type: application/json 等情况下自动触发，服务端必须正确响应它
• 前端无法绕过这个限制；禁用浏览器安全策略（如 Chrome 加 --disable-web-security）仅用于本地调试，不可用于生产

JSONP 只能 GET，且不支持现代认证和错误处理

JSONP 是利用