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

最新推荐文章于 2024-07-12 19:47:55 发布

原创最新推荐文章于 2024-07-12 19:47:55 发布 · 685 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

api代理专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在前端开发中遇到浏览器跨域问题时的两种常见解决方法。第一种是在Vue项目的vue.config.js中配置代理，将前端请求转发至目标服务器，避免跨域限制。第二种方法是针对Chrome浏览器，通过修改快捷方式的目标路径，添加参数来禁用web安全，允许跨域。但这种方法可能不适用于所有版本的Chrome，并且存在安全隐患。

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新建目录的路径