Vue跨域配置与部署到Nginx的设置方法
Vue 项目的跨域配置，其实不少人都卡过。是你前端本地跑起来后，想调下远程接口，结果一大堆 CORS 报错跳出来，心态直接崩。嗯，后端要是配合，搞个跨域头也就几秒钟的事。但遇上不配合的？那就得前端自己想办法搞定了。
vue-cli搭的项目，最常用的方式是改config/index.js，加个proxyTable代理，把前端求伪装成本地发出的，绕过浏览器的跨域检测。效果嘛，挺稳定，调试也方便。
部署到生产用nginx就稍微麻烦点了。你得在nginx.conf里加add_header Access-Control-Allow-Origin *这类配置。有的接口还得带OPTIONS预检，那就要再多配下Access-Control-Allow-Methods和Headers。
不过注意哦，本地调试用devServer.proxy没问题，但别把这个带进生产环境，打包后的静态文件可没proxy这么灵的东西。线上还是得靠nginx来顶。
对跨域这块想进一步了解，下面这些文章还蛮有参考价值的：
如果你也在折腾前后端分离，又刚好被 CORS 折腾得不轻，建议这几篇你都看看，思路清晰，实操性也强。
文件大小：558.21KB
评论区