[ 以下为开发环境跨域配置 ]

一、首先需要了解什么是跨域问题，网上资料说明的很清楚，这里给出链接

什么是跨域

二、需要理清楚proxy代理，如何代理？

官网解释：

devServer.proxy

• Type: string | Object

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

  devServer.proxy 可以是一个指向开发环境 API 服务器的字符串

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000

如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

proxy中配置字段的含义

proxy: {
      '/api': {
        target:'http://baidu.com', // 请求地址
            
        changeOrigin:true, // 在vue-cli3中，默认changeOrigin的值是true,意味着服务器host设置成target，这与vue-cli2不一致，vue-cli2这个默认值是false
// changeOrigin的值是true,target是host, request URL是http://baidu.com
// 如果设置changeOrigin: false，host就是浏览器发送过来的host，也就是localhost:8082。
            
        pathRewrite:{  // 路径重写，eg:把api接口替换为''
          '^/api': ''  
        }
      }
    }

changeOrigin详解

三、使用过程中遇到的坑

看完了官网，也百度了很多，于是我的配置如下

// request.js
import axios from 'axios';
import { getToken } from 'common/auth';
import store from '../store';
export function requestUser(config) {
  const instance = axios.create({
    baseURL: 'http://127.0.0.1:7001',
    timeout: 5000
  })
  
// 请求接口
export function getTest(){
  return requestUser({
    url:'/test',
    method:'get'
  })
}
    
// 配置devServe.proxy
 devServer: {
    open: true,
    port: 8082,
    proxy: {
      // test 请求接口
      '/test': {
        target: 'http://127.0.0.1:7001', // 请求地址
      },
    }
  },

然后就试，怎么着也是出问题，试了半天以为是后端的问题，就又去后端调东西，实际和后端没关系

egg可以配置cors解决跨域，当然我们这次主要是前端解决，还是发下egg配置cors解决跨域：

// config.default.js
config.cors = {
    origin: '*', // 如果不想后端解决，只需要把*去掉
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',
  };

// plugin.js
module.exports = {
  cors: {
    enable: true,
    package: 'egg-cors',
  },
};

// 记得npm i egg-cors

那么进入正题，我们的过程中究竟哪里出了问题？

答案是：request.js中的baseURL:'http://127.0.0.1:7001'

我的理解：代理，代理，既然代理，那么baseURL就不该写全路径，如果写全路径会与代理冲突，就不会走代理

baseURL可以不写全路径，不写默认为项目地址，local:http://localhost:8082/，可以参考axios官网

当然了如果你想试一试，可以把baseURL改为项目地址http://localhost:8082/再设置代理也没有问题，不过这么做没有必要。

那么修改下代码，把baseURL改为’ ’

// request.js
import axios from 'axios';
import { getToken } from 'common/auth';
import store from '../store';
export function requestUser(config) {
  const instance = axios.create({
    baseURL: '',
    timeout: 5000
  })
  
// 请求接口
export function getTest(){
  return requestUser({
    url:'/test',
    method:'get'
  })
}
    
// 配置devServe.proxy
 devServer: {
    open: true,
    port: 8082,
    proxy: {
      // test 请求接口
      '/test': {
        target: 'http://127.0.0.1:7001', // 请求地址
      },
    }
  },

配置完需要重启服务

baseURL并没有写全路径，那么现在请求的地址http://localhost:8082/test

因为设置代理，所以/test会被代理到请求http://127.0.0.1:7001/test，已解决跨域

如果你有多个接口，有两种办法
1.baseURL为‘ ’

// 配置devServe.proxy
 devServer: {
    open: true,
    port: 8082,
    proxy: {
      '/test1': {
        target: 'http://127.0.0.1:7001', 
      },
       '/test2': {
        target: 'http://127.0.0.1:7001', 
      },
       '/test3': {
        target: 'http://127.0.0.1:7001', 
      },
    }
  },

2.在baseURL加上api前缀，并且在proxy做修改

// request.js
import axios from 'axios';
import { getToken } from 'common/auth';
import store from '../store';
export function requestUser(config) {
  const instance = axios.create({
    baseURL: 'api',
    timeout: 5000
  })
  
// 请求接口
export function getTest(){
  return requestUser({
    url:'/test',
    method:'get'
  })
}
    
export function getUserInfo(){
  return requestuser({
    url:'/profile',
    method:'get'
  })
}
    
// 配置devServe.proxy
 devServer: {
    open: true,
    port: 8082,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:7001', 
      },
    }
  },

也就是遇到/api开头的接口就会被代理到target，但是现在会报404错误，

因为是没有api这个接口的，是需要给替换掉为空

// 配置devServe.proxy
 devServer: {
    open: true,
    port: 8082,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:7001', 
        pathRewrite: {
          '^/api': ''
        }
      },
    }
  },

此时，虽然发送的请求到地址：http://localhost:8080/api/test/, 但是已经代理到了地址: http://127.0.0.1:7001/test

如果你的接口都是api/xxx，那么baseURL为''就好，这也就是大多接口为什么前面有api的原因

---

如有不当，还请老哥指出。