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

跨域：不同源即跨域

同源：域名，协议，端口均相同

浏览器的同源策略，是浏览器对 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’。重点是后端要进行跨域相关配置！

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