vue项目中如何配置vue.config.js解决跨域问题

最近写vue项目请求自定义接口时，出现了跨域问题。报错代码如下：

Access to XMLHttpRequest at 'http://localhost:5001/index' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

查了很多很多解决方案都没有用。
这里，我使用到的方法是配置vue.config.js文件，如果没有该文件，则在项目的根目录下新建一个。

原理：
1、将域名发送给本地服务器(localhost:8080)
2、再由本地服务器去请求真正的服务器
3、服务端发出的请求，不存在跨域问题

以下是vue.config.js的详细配置：

// 导出模块
module.exports = {
  devServer: {
    proxy: { // 配置跨域
      '/api': {
        target: `http://127.0.0.1:5001/`,   //自定义的请求后台接口
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': '' // 重写请求
        }
      }
    }
  }
}

注意：修改vue.config.js后，需要重启服务
然后再使用axios进行请求：

// http://127.0.0.1:5001/index是自定义接口
// 为了解决跨域问题，配置了vue.config.js文件
//this.$axios.get('http://127.0.0.1:5001/index').then(
this.$axios.get('api/index').then(
	(res) => {
		console.log(res.data)
	},
	(err) => {
		console.log(err)
	}
)

这里的api/就替代了http://127.0.0.1:5001/。