做前端ref="/tag/156/" style="color:#EB6E00;font-weight:bold;">开发时，经常会遇到页面正常跑在本地，一调接口就报错的情况。最常见的提示就是："No 'Access-Control-Allow-Origin' header is present"。这其实就是JavaScript的跨域问题。
什么是跨域？
浏览器出于安全考虑，实行了同源策略。也就是说，只有协议、域名、端口都一致，才允许通过Ajax等方式获取数据。只要其中一项不同，就被视为“跨域”。
比如你在 http://localhost:3000 的页面里，想请求 https://api.example.com 的接口，即使只是差了个协议（http vs https），也算跨域。
常见的跨域场景
开发时最常碰上的几种情况：
- 本地前端访问测试环境API
- 前端部署在 a.site.com，接口在 api.site.com
- 使用第三方服务，比如天气、地图API
CORS：主流解决方案
目前最标准的方式是CORS（跨域资源共享）。需要后端配合，在响应头中加上允许跨域的字段。
比如后端返回时设置：
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization这样来自 http://localhost:3000 的请求就能被接受。如果想允许多个域名，得动态判断 origin 是否在白名单里再设置。
开发阶段的临时方案
如果你只负责前端，后端还没加CORS支持，可以先用代理绕过去。
比如用Webpack Dev Server时，在配置里加一段：
devServer: {
proxy: {
'/api': {
target: 'https://api.example.com',
changeOrigin: true,
pathRewrite: { '^/api': '' }
}
}
}之后所有发往 /api 的请求都会被自动转发到目标地址，浏览器看到的是同源请求，自然不报错。
JSONP：老但有用的招
虽然现在用得少了，但在一些不支持CORS的老系统或静态页面中，JSONP依然管用。
它利用 <script> 标签不受跨域限制的特点，把数据通过回调函数传回来。
<script>
function handleData(data) {
console.log('拿到数据：', data);
}
</script>
<script src="https://api.example.com/user?callback=handleData"></script>注意接口得支持 callback 参数，返回内容要是 handleData({...}) 这样的JS代码。
避免踩坑的小建议
跨域请求如果是POST、PUT等非简单请求，浏览器会先发一个 OPTIONS 预检请求。后端必须正确响应这个请求，否则真正的请求根本不会发出。
调试时可以在Network面板看有没有OPTIONS请求出现，状态是不是200。如果不是，问题多半出在这儿。
还有，Cookie跨域要特别处理。默认是不会带上凭证的，得在请求里显式声明：
fetch('/api/data', {
method: 'GET',
credentials: 'include' // 携带cookie
})同时后端也要允许凭据：
Access-Control-Allow-Credentials: true而且这时候 Access-Control-Allow-Origin 不能写 *，必须指定具体域名。
跨域不是bug，是浏览器的安全机制。理解它的规则，和后端沟通清楚，大多数问题都能快速解决。