Vue – 跨域问题解决

简介

跨域问题是指 Vue 在开发环境下请求其它 URL 链接出现的同源策略限制问题，即 http://localhost:8080 站访问 http://www.tzming.com 这样的站，因为已经出现不同网站之间的请求，称为跨域，而浏览器有同源策略限制，在非简单请求方式下，有可能会出现不允许请求，或不接受响应的问题。

解决

通过vue-cli 创建的项目在遇到接口跨域问题时，可以通过代理的方式来解决

①  把 axios 的请求根路径设置为vue 项目的运行地址（接口请求不再跨域）

②  vue 项目发现请求的接口不存在，把请求转交给proxy 代理

③  代理把请求根路径替换为devServer.proxy 属性的值，发起真正的数据请求

④  代理把请求到的数据，转发给 axios

操作

步骤1，在main.js 入口文件中，把 axios 的请求根路径改造为当前web 项目的根路径

步骤2，在项目根目录下创建vue.config.js 的配置文件，并声明如下的配置

注意：

①  devServer.proxy 提供的代理功能，仅在开发调试阶段生效

②  项目上线发布时，依旧需要API 接口服务器开启 CORS 跨域资源共享