JavaScript 跨域怎么解决

你可能在开发网页时遇到过这种情况：明明在本地测试没问题，把页面放到服务器上后，部分功能就用不了了——比如点击按钮请求数据时，控制台弹出个看不懂的“跨域错误”提示。这不是你代码写错了，而是浏览器的安全机制在起作用。简单说，浏览器为了防止恶意网站窃取数据，限制了“当前页面的域名”和“请求的目标域名”不一样时，无法直接交互，这就是跨域。

最常用的解决方法：CORS

CORS是跨域资源共享的缩写，是目前最主流的方案，不需要改前端代码，只要改后端配置就行。举个生活化的例子：你去邻居家借酱油，以前人家怕你拿了就走，不让进；现在邻居贴了个“欢迎借酱油，只要登记就行”的提示，相当于后端在服务器上设置了这个提示。

具体操作也不复杂，比如用Node.js写的后端，只要加一行代码：res.setHeader('Access-Control-Allow-Origin', 'https://你的前端域名.com')，意思就是“只允许这个域名的页面来借数据”；如果想更开放，也可以填*，允许所有域名访问，但不推荐用在生产环境里，相当于邻居对所有人开门，风险太高。

前端常用的小技巧：JSONP

如果后端不能改配置，那用JSONP也是个老办法，适合处理简单的GET请求。还是用借东西的例子：以前邻居不让你进家门，但你可以在门口递个小纸条，说“我要借酱油，你把结果写在我给你的纸条上”——JSONP的原理就是动态创建一个<script>标签，把请求地址附在后面，后端返回一个带函数调用的JS代码，前端拿到后直接执行这个函数，就能拿到数据了。

不过JSONP有个缺点，它只支持GET请求，要是你需要提交表单数据，就用不了了，而且也没法拦截错误，比如请求失败了，前端很难收到提示，所以现在只在一些特殊场景里用。

代理中转法：解决复杂跨域

要是上面两种方法都不行，那就用代理中转，相当于找个中间朋友帮忙传话。比如你要去远方的超市买东西，直接去不了，但可以找本地的跑腿小哥，小哥替你去买，再把东西带回来。

在开发里，常用的代理有两种：一种是开发阶段用的工具，比如Vue的vue.config.js里加proxy配置，或者Webpack的代理，把前端的请求先发给本地的代理服务器，代理再帮你去请求目标服务器，拿到结果后再返回给前端；另一种是上线后用的，比如Nginx的反向代理，把域名的请求转发到另一个域名，相当于用户访问你的域名，实际是Nginx帮他去拿数据，这样就不会触发浏览器的跨域限制了。

这几种方法各有适用场景：后端能改配置时优先用CORS，简单GET请求用JSONP，开发或复杂场景用代理，根据自己的需求选就行。