解决跨域问题

产生跨域

前后端分离时，前端和后端API服务器可能不在同一台主机上，就存在跨域问题，浏览器限制了跨域访问。  同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域 

---

 静态代理 在vue.config.js的devServer中配置

 // 配置proxy
    proxy: {
      // 开发环境代理配置
      '/dev-api': {
        // 目标服务器地址，代理访问 http://localhost:8001
        target: 'http://localhost:7777',
        changeOrigin: true, // 开启代理服务器，
        pathRewrite: {
          ['^/dev-api']: ''
        }
      }
    }

---

动态代理，根据不同的环境配置， 

 1.根目录创建开发环境 .env.development 

#只有以 VUE_APP_开头的变量会被webpack 静态嵌入到项目中进行使用
#process.env.VUE_APP_XXX  来获取


#目标服务接口地址，这个地址是按照自己的环境来的，添加或者更改配置后，需要重新启动服务
VUE_APP_SERVICE_URL='http://localhost:7777'

#开发基础路径
VUE_APP_BASE_API='/dev-api'

 2.根目录创建生产环境 .env.production

#生产基础路径
VUE_APP_BASE_API='/pro-api'

3.axios中封装baseURL   utils/request.js

const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000 //请求超时，5000毫秒
});

4.vue.config.js中配置

 proxy: {
      // 开发环境代理配置
      // '/dev-api':
      [process.env.VUE_APP_BASE_API]: {
        // 目标服务器地址，代理访问 http://localhost:8001
        target: process.env.VUE_APP_SERVICE_URL,
        changeOrigin: true, // 开启代理服务器，
        pathRewrite: {
          // ['^/dev-api']: ''
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }