解决JSON数据跨域问题的实用方法

什么是JSON数据跨域问题

你在本地开发一个网页，想从另一个域名下获取JSON数据，比如从 https://api.example.com 获取用户信息。结果浏览器报错：‘No 'Access-Control-Allow-Origin' header’。这就是典型的跨域问题。

浏览器出于安全考虑，实施了同源策略。只有当协议、域名、端口都一致时，才允许发起请求。一旦不一致，就被视为“跨域”，默认禁止读取响应内容。

常见出问题的场景

比如你本地用 file:// 打开HTML文件，或者用 http://localhost:3000 访问页面，去请求 https://api.somedata.com/data.json，基本都会被拦下。

几种可行的解决方案

最直接的办法是让后端配合。服务器在响应头中加上 Access-Control-Allow-Origin，告诉浏览器：“我允许你这个来源来拿数据”。

比如后端设置：

Access-Control-Allow-Origin: http://localhost:3000

或者开放给所有来源（注意安全风险）：

Access-Control-Allow-Origin: *

前端临时调试怎么办

如果你只是临时测试，又没法改后端，可以启动本地服务时加个代理。比如用 Chrome 浏览器启动时带上参数：

chrome --disable-web-security --user-data-dir=/tmp/chrome-temp

这会关闭安全限制，但只建议本地调试用，别日常使用。

更稳妥的方式是使用开发服务器做代理。比如你在用 Vite 或 Webpack，可以在配置里加：

server: {
  proxy: {
    '/api': 'http://api.example.com'
  }
}

这样请求 /api/data 实际会转发到目标地址，绕过跨域。

JSONP 还能用吗

早年常用 JSONP 来绕过跨域，利用 <script> 标签不受同源策略限制的特点。

后端返回一段函数调用：

handleData({"name": "张三", "age": 25});

前端提前定义好 handleData 函数接收数据。但现在主流都用 CORS 了，JSONP 只支持 GET，也不够安全，新项目不推荐。

预检请求是怎么回事

当你发送的是复杂请求，比如带自定义头或 POST JSON 数据，浏览器会先发一个 OPTIONS 请求“探路”。后端必须正确响应这个预检请求，才能继续后续操作。

如果 OPTIONS 返回 404 或没带允许的头，那真正的请求根本不会发出。这时候要检查服务器是否处理了 OPTIONS 方法。

小结一下

跨域不是bug，是浏览器的安全机制。解决问题的关键是让服务端配合开启CORS，或者开发阶段用代理中转。理解这个机制后，下次看到跨域报错，就知道该找谁改配置了。