前端跨域代理

本篇以 vue3.0.0 、vue/cli 4.5.7 为例作为讲解，以 proxy 解决跨域：

以下为跨域的经典报错：
Access to XMLHttpRequest at 'https://abcdefg.com/user-data/list' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决办法

1. 在项目根目录新建vue.config.js文件，文件内容为：

module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        hot: true, // 开启热更新
        open: false,
        proxy: {//配置跨域
            '/api': {
                target: "https://abcdefg.com",
                changOrigin: true,//允许跨域
                pathRewrite: {
                    '^/api': ''//请求的时候使用这个就可以
                }
            }
        }
    }
}

只需调整target的值为目标访问地址即可。

2. 在项目根目录新建.env.development和.env.production文件，文件内容均为：关键代码

VUE_APP_BASEURL=/api

3. 在请求文件（我的是src/utils路径下的request.js文件）中，使用基地址，内容为：

import axios from "axios";

const request = axios.create({
  baseURL: process.env.VUE_APP_BASEURL,
});

export default request;

4. 写请求时：
如果请求url为https://abcdefg.com/user-data/list，那么我就直接写/user-data/list：

此篇启发来源于此
解决：一个项目多个后端