龙空技术网

axios配置vue项目本地测试环境跨域解决方法

tchaihomjon 378

前言:

如今小伙伴们对“vue axios跨域配置”都比较注重,你们都需要剖析一些“vue axios跨域配置”的相关内容。那么小编在网摘上收集了一些对于“vue axios跨域配置””的相关资讯,希望大家能喜欢,同学们一起来学习一下吧!

问题

后端已经配置好了跨域,前端本地搭建vue-cli测试环境的时候如何解决跨域?(前提进行了基本的axios封装)

分析

这个时候后端API是一个明确的外网环境(使用外网IP或固定域名访问),需要通过vue-cli脚手架搭建一个代理模式访问API接口。因为,本地测试环境默认访问的前端地址是 ,除非AP接口也是这地址和接口,不然必然出现跨域问题(跨域是浏览器的限制)

这个接口为例,

基础地址是

通过代理的方式,将以本地请求,变成接口服务器自请求,即,在本地看到的请求会是:

解决创建vue.config.js文件

//vue.config.jsmodule.exports = {  devServer: {    proxy: {      "/api": {    // 这里的`/api`是自定义的        target: ";, //这里是真实的接口baseURL        changeOrigin: true,        ws: true,        pathRewrite: {          "^/api/": "", // 这里的`^/api`也是是自定义的        },      },    },  },};

注意上面的注释部分

/api^/api都是自定义的,可以随意设置,但是,后面在axios封装部分需要特别注意target是后端接口的真实基础路径部分,也就是一般axios封装配置的baseURL

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 = ";; //生产环境}let instance = axios.create({    timeout: 1000 * 60,    baseURL: api_base_url,});

封装axios的时候,测试环境的baseURL必须是和vue.config.js里面的第一个路径完全一致

3.接口模块写法不做任何改变

标签: #vue axios跨域配置