问题
后端已经配置好了跨域,前端本地搭建
vue-cli
测试环境的时候如何解决跨域?(前提进行了基本的axios封装)
分析
这个时候后端API是一个明确的外网环境(使用外网IP或固定域名访问),需要通过vue-cli
脚手架搭建一个代理模式访问API接口。因为,本地测试环境默认访问的前端地址是 http://localhost:8080/
,除非AP接口也是这地址和接口,不然必然出现跨域问题(跨域是浏览器的限制)
以
http://ttapi.research.itcast.cn/app/v1_0/authorizations
这个接口为例,基础地址是
http://ttapi.research.itcast.cn
通过代理的方式,将以本地请求,变成接口服务器自请求,即,在本地看到的请求会是:
http://localhost:8080/api/app/v1_0/authorizations
解决
创建
vue.config.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封装部分需要特别注意
target
是后端接口的真实基础路径部分,也就是一般axios封装配置的baseURL
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的时候,测试环境的baseURL必须是和
vue.config.js
里面的第一个路径完全一致
接口模块写法不做任何改变