问题
后端已经配置好了跨域前端解决跨域问题，前端本地搭建vue-cli测试环境的时候如何解决跨域？(前提进行了基本的axios封装)
分析
这个时候后端API是一个明确的外网环境（使用外网IP或固定域名访问），需要通过vue-cli脚手架搭建一个代理模式访问API接口。因为，本地测试环境默认访问的前端地址是 :8080/，除非AP接口也是这地址和接口，不然必然出现跨域问题(跨域是浏览器的限制)
以这个接口为例，
基础地址是
通过代理的方式，将以本地请求，变成接口服务器自请求，即，在本地看到的请求会是:
:8080/api/app/v1_0/
解决创建vue..js文件
//vue.config.js
module.exports = {
devServer: {
proxy: {
"/api": { // 这里的`/api`是自定义的
target: "http://ttapi.research.itcast.cn/", //这里是真实的接口baseURL
changeOrigin: true,
ws: true,
pathRewrite: {
"^/api/": "", // 这里的`^/api`也是是自定义的
},
},
},
},
};注意上面的注释部分
/api和^/api都是自定义的，可以随意设置，但是前端解决跨域问题，后面在axios封装部分需要特别注意是后端接口的真实基础路径部分，也就是一般axios封装配置的
2.axios封装注意事项
let api_base_url = "";
if (process.env.NODE_ENV === "development") {
api_base_url = "/api"; //这里填写测试环境地址，必须和`vue.config.js`那里的第一个路径一致
} else if (process.env.NODE_ENV === "production") {
api_base_url = "http://ttapi.research.itcast.cn/"; //生产环境
}
let instance = axios.create({
timeout: 1000 * 60,
baseURL: api_base_url,
});封装axios的时候，测试环境的必须是和vue..js里面的第一个路径完全一致
3.接口模块写法不做任何改变
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。