vue中的跨域问题，axios和vue.config.js的devServer.proxy vue中的跨域问题，axios和vue.c

跨域：不同源即跨域同源：域名，协议，端口均相同浏览器的同源策略，是浏览器对 JavaScript 施加的安全限制。
https://www.jianshu.com/p/cfbccb0adae9
开发、测试环境的跨域问题：配置devServer.proxy
vue-cli3中将扩展和基础配置都写在根目录的vue.config.js中。vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。https://cli.vuejs.org/zh/config/#vue-config-js
axios配置主要在于axios.defaults.baseURL，其他都是个人记录，一些封装比如token之类的
在开发/测试环境中，因为下面会使用proxy方法，所以此处的baseURL不太重要，它在proxy中会被替换，随便写也没事

// 创建 axios 实例开发域名 const wristbandService = axios.create({ baseURL: '',//设置为空 // baseURL: 'http://172.31.231.91:8080/',//设置baseURL相当于给所有此类请求前加上baseURL，这里可以用导入的变量 timeout: 6000, headers: { 'Content-Type': 'application/json; charset=utf-8' } })// 下面这些都和跨域无关 wristbandService.interceptors.request.use(config => { const token = Vue.ls.get(ACCESS_TOKEN) if (token) { config.headers['Authorization'] = 'Bearer ' + token // 让每个请求携带自定义 token 请根据实际情况自行修改 } return config }, err)wristbandService.interceptors.response.use(response => { return response.data }, err)const installer = { vm: {}, install(Vue) { Vue.use(wristbandService) } }export { wristbandService as WBaxios}// 最后封装完的请求是WBaxios

vue.config.js中devServer配置注意：devServer用于本地开发环境，生产环境是不生效的。
https://cli.vuejs.org/zh/config/#devserver-proxy
在下面的代码里：
1、proxy会拦截所有url中可以成功匹配到 '/api/wristband' 的请求。（proxy采用正则匹配，一旦url中包含你要的字符串则停止向下匹配，详查proxy匹配规则）
2、它会把拦截到的请求中的baseUrl替换为此处的target
3、changeOrigin：true 表示跨域

devServer: { // development server port 8000 port: 8000, proxy: { '/api/wristband': { target: 'http://172.xx.xxx.xx:8080/',// 拦截到'api/wristband'的，将axios中baseURL替换成target ws: true,// proxy websockets changeOrigin: true,// 是否跨域 // pathRewrite: {// 重写，根据需要 //'^/api/wristband': '/api/newpath', // } }, } }, }

api调用

import { WBaxios } from 'xxxxx'// 导入封装的请求export function getDataOfIndicatorChart (params) { return WBaxios({// 请求 url: `/api/wristband/test`,//此处请求的url method: 'get', params: { ...params } }) }

重点 WBaxios发出请求时，会将此处的url前面加上配置过的baseURL，这一个整体，会被proxy检测拦截，proxy操作过后就可以跨域了
生产(线上)环境的跨域问题：后端Nginx反向代理/cors跨域配置
由于devServer只用于本地环境，生产环境是不生效的，所以上面所说的devServer.proxy方法无效
axios配置这里baseURL要配置成我们实际请求的服务器端口

// 创建 axios 实例开发域名 const wristbandService = axios.create({ baseURL: 'http://172.xx.xxx.xx:8080/',//设置baseURL相当于给所有此类请求前加上baseURL，这里可以用导入的变量 timeout: 6000, headers: { 'Content-Type': 'application/json; charset=utf-8' } })

vue.config.js不用配置proxy，api调用相同，此时请求的地址是‘http://172.xx.xxx.xx:8080/api/wristband/test’。重点是后端要进行跨域相关配置！ 【vue中的跨域问题，axios和vue.config.js的devServer.proxy】antd-vue-prohttps://github.com/vueComponent/ant-design-vue-pro/issues/91
简洁https://www.cnblogs.com/yaowen/p/10559586.html
.envhttps://blog.csdn.net/Liu_yunzhao/article/details/94077271
vue-cli3 config https://gitee.com/mrpzx/vue-cli3-config#proxy