vue axios 请求跨域

接上篇vue baseUrl多后端环境切换，换成真实的地址后发现接口总是不通，这对这个vue的配置还是理解不到位，这回做了波实验终于通透了

请求封装思路

1、将axios后端请求和前端请求分离开

这点是用baseURL做到，前端不需要baseUrl，baseURL可以直接配置成后端的公共地址
如果不用代理而直接请求的话，可以是这个样子：

let host = 'localhost';
let port = '8080';
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分，每个请求将会带该部分
  baseURL: "http://"+host+":"+port+process.env.VUE_APP_BASE_API,
  //baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 10000
})

将host和port直接配置进url。但会有跨域问题。

2、将axios请求拦截，代理到后端指定地址

这个就是在vue.config.js中进行配置，通过target 和pathRewrite来重写访问后端的路径，这样在前端看不出来后端的实际访问地址。

proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
    },

这里直接将path重写成空，实际的话可以根据后端的环境进行配置，比如后端配置context-path 为 /dev-api

server.servlet.context-path = /dev-api

这个时候，就可以直接rewrite到 /dev-api来实现整体的访问变更。

3、通过nginx配置来实现跨域
这个直接参考之前的nginx配置就好

代理跨域配置

vue.config.js中配置devServer.proxy

前端应用和后端 API 服务器没有运行在同一个主机上，需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置

说明：

1、target 开始直接配置的localhost，没有匹配到静态文件的请求都将走这个代理，走的mockjs，不存在跨域问题；添加端口号后，就产生了跨域问题。
2、changeOrigin 发送请求头中host会设置成target
3、pathRewrite 路径重写为""
4、process.env.VUE_APP_BASE_API 值为/dev-api

axios 请求配置

配置baseURL与vue.config.js为同一参数，确保axios所发请求均被代理到vue.config.js target配置地址

请求调用

测试交易中直接发送请求

查看前端请求URL

这里的请求地址是：

Request URL: http://localhost/dev-api/getVerifyCode

但我们实际后端的地址并不是这个，这个请求将通过代理转发至实际后端地址。

后端实际为：

http://localhost:8080/getVerifyCode

请求分析

对比前后端两个url，可以很好的理解vue.config.js中的proxy配置。

前端请求为：http://localhost/dev-api/getVerifyCode
1、将axios请求path中带有 /dev-api 的请求拦截
2、将对应请求转发至target ：localhost:8080
3、将请求路径中的 /dev-api 重写为 “”
4、请求实际为http://localhost:8080/getVerifyCode