vue 代理本地api请求跨越问题

1、当前端接口要访问服务端接口是存在的浏览器跨越的时候，常用的两种做法：

第一种：从前端代码下手，配置代理

①在.env.development文件中找到你要访问的api：

登录接口
VUE_APP_BASE_API = '/login'

②在vue.config.js文件中进行代理配置

module.exports = {
    publicPath: "./",
    runtimeCompiler: true,
    productionSourceMap: false,
    devServer: {
        port: port,
        open: true, //配置自动启动浏览器
        proxy: {
            [process.env.VUE_APP_BASE_API]: { // 这个是你env里面配置的相应名称
                target:`http://baidu.com/login`, // 这个是你要访问服务端的地址
                changeOrigin: true,
                pathRewrite: {
                    ["^" + process.env.VUE_APP_UPGRADE_API]: "",
                },
            },
        }
    }
};

第二种：以Chrome为例，直接给你的浏览器配置在浏览器中允许跨越，这种配置可以让你之后在浏览器上运行的页面都自动允许跨越。

 1. Chrome 版本小于49

设置步骤：
在Chrome的快捷图标上鼠标右键 --> 属性 --> 目标 --> 在原chrome路径的基础上加上 --disable-web-security --> 应用。
之后关闭所有chrome，点击Chrome的快捷图标，重新启动浏览器，如果看到地址栏下面有个小黄条——你使用的是不受支持的命令标记 --disable-web-security，就是设置成功了。

2. Chrome 版本大于49

设置步骤和上面类似，就是在原chrome路径的基础上加上的代码串不一样。
建议：发送一个快捷方式到桌面，重命名下，然后在这个快捷方式上面进行配置。
设置步骤：
在Chrome的快捷图标上鼠标右键 --> 属性 --> 目标 --> 在原chrome路径的基础上加上 --disable-web-security --user-data-dir=C:\Chrome --> 应用。（注意：以上的字符串加在原路径引号外面，且要有空格间隔。）
其中，C:\Chrome 是你本地硬盘的一个目录，最好自己新建一个，上面的目录路径换成自己新建的目录即可。

3. Mac系统

MAC 上Chrome跨域设置，是直接终端敲命令设置，不过每次mac重启后，都要重新执行命令。
设置步骤：

新建一个目录。用于存放保存关闭安全策略后的用户信息的，名称和位置随意。
在终端中输入：open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/Vic/Documents/Chrome
其中，/Users/Vic/Documents/Chrome 对应步骤1新建目录的路径