JavaScript 如何做跨域

正文

你有没有遇到过这种情况？用浏览器打开一个网页，点了个按钮想从后台拿个数据，结果控制台跳出来个“跨域错误”的红框，一脸懵圈——这就是今天要聊的JavaScript跨域问题。简单说，跨域就是浏览器里的网页，想跟不同地址的服务器打交道时，被浏览器拦住了，像两个不在一个小区的人，没门禁卡没法串门。

为啥要拦着？其实是浏览器的安全机制在保护你：要是随便一个网页能拿你银行、社交平台的数据，那风险就太大了。这个拦的规则叫“同源策略”——同源就是“协议、域名、端口都一样”，比如你家的网页是https://mywebsite.com:8080，想找同地址的https://mywebsite.com:8080/api接口，就没问题；但要找https://other.com/api，就会被拦，这就是跨域的核心原因。

那JavaScript要怎么跨域解决呢？最常用的两种方法，普通人也能看懂：

后端开个“门禁卡”——CORS

CORS的全称是跨域资源共享，说白了就是服务器给浏览器发个“允许你进来”的纸条。比如你是前端，要找别的域名的接口，后端只要在返回的头里加一句话：Access-Control-Allow-Origin: https://你的前端域名.com，浏览器看到这行字，就知道“哦，这个接口允许你访问”，就能拿到数据了。

举个生活化的例子：你开了个奶茶店（前端），想从对面的面包厂（跨域服务器）进面粉。面包厂本来不让外人拿，现在贴了个告示：“允许奶茶店拿面粉”，你拿着自己店的牌子（域名）去，就能顺利拿货。要是想让所有人都能拿，也可以写*，但安全起见，最好只允许自己需要的域名。

借个“传声筒”——代理转发

要是后端改不了配置，或者简单想快速测试，代理就是个好用的传声筒。原理是：浏览器找自己域名下的一个小接口（代理），这个小接口再去跟跨域的服务器打交道，相当于你找家里的快递柜（代理）收快递，不用直接跟外面的快递员（跨域服务器）对接。

比如你用Vue、React做项目，开发阶段把配置里的proxy设成http://跨域地址.com，本地开发时，请求/api/data就会自动转发到http://跨域地址.com/api/data，浏览器根本察觉不到跨域，自然就不会拦。生活里的例子就是，你想借邻居家的酱油，让爸妈去跟邻居说，不用自己跑过去——既避免了跨域的尴尬，又简单省事。

还有个小技巧，要是只是拿个图片、视频这类静态资源，用img标签的src属性直接跨域就行，因为这是浏览器默认允许的资源加载，就像直接拿快递柜里的现成包裹，不用额外申请。但要是想拿数据、改数据的接口，就必须用上面两种方法，不然还是会被拦。

最后要提醒一句：跨域问题是浏览器的限制，不是后端的问题，也不是你代码写错了，是安全机制在保护你。选方法的时候，优先用CORS，因为它是官方标准，安全又规范；代理适合开发测试，别用在生产环境哦。