内容摘要：vue项目跑在8080端口，后端接口挂在3000端口，浏览器地址栏敲下请求，控制台立马甩出一行红字：Access to XMLHttpRequest at 'http://localhost:3000

vue项目跑在8080端口，域前后端接口挂在3000端口，端解浏览器地址栏敲下请求，域前控制台立马甩出一行红字：Access to XMLHttpRequest at 'http://localhost:3000/api/user' from origin 'http://localhost:8080' has been blocked by CORS policy。端解你盯着这行字，域前心里清楚——这不是端解后端不给你数据，是域前浏览器在中间横插一脚。跨域问题本质是端解浏览器的同源策略在作祟，协议、域前域名、端解端口任何一个不同，域前都算跨域。端解而vue前端能做的域前，其实比大多数人想的端解多。

最直接的域前办法，是让后端在响应头里加上Access-Control-Allow-Origin。但问题在于，很多场景下你根本碰不到后端代码，或者后端是别人团队维护的，你提个issue人家排期到下个月。这时候前端得自救。vue开发服务器自带代理功能，在vue.config.js里配置devServer.proxy，把请求转发到目标服务器。比如你本地请求/api，代理会把请求转发到http://localhost:3000，浏览器看到的请求是同源的，自然就放行了。这个方案只对开发环境有效，打包上线后代理就失效了——除非你在nginx里做同样的反向代理配置。

生产环境的跨域，我见过不少团队直接上JSONP。但这玩意儿只支持GET请求，而且需要后端配合返回特定格式的JavaScript脚本。现在接口设计普遍RESTful，POST、PUT、DELETE满天飞，JSONP基本是鸡肋。更实用的方案是改请求头——前端在axios请求里带上withCredentials: true，同时后端设置Access-Control-Allow-Credentials: true，并且Access-Control-Allow-Origin不能是通配符*，必须指定具体域名。这个方案能带cookie跨域，但需要后端配合改两行代码，前端能做的只是把凭证带上，剩下还是得靠后端点头。

还有个偏方，用window.postMessage配合iframe。你可以在页面里藏一个隐藏的iframe，iframe的src指向目标域的页面，然后通过postMessage跟iframe通信，让iframe里的页面去发请求。这招能绕过跨域限制，但实现起来繁琐，而且需要目标域提供一个能接收消息的页面——等于还是得对方配合。我见过有人用这个方案做第三方登录回调，但日常业务接口这么搞，纯粹是给自己找麻烦。

真正让我觉得靠谱的，是环境变量加代理的双层方案。开发环境用vue-cli的proxy，生产环境在nginx里配置location /api { proxy_pass http://backend-server; }。前端代码里统一用相对路径/api请求，不写死域名，这样无论部署到哪台服务器，只要nginx配置正确，跨域问题就永远不会出现在前端代码层面。去年我接手一个老项目，前端写死了http://192.168.1.10:3000这种地址，上线后IP变了，整个前端接口全挂。改成相对路径后，运维只需要改nginx配置，前端一行代码不用动。

说到底，跨域是浏览器给Web开发者设的一道关卡。前端能做的，只是绕过或者伪装，真正解决问题还得靠服务端配合。但作为vue开发者，你至少得知道：开发环境用proxy，生产环境用nginx，请求路径写相对地址，别把域名写死在代码里。这几个习惯养成了，跨域报错至少能减少八成。剩下那两成，老老实实找后端改响应头，别想着纯前端能搞定一切——浏览器的那道墙，不是为让你翻墙而设计的。