vue 配置代理,简单解决跨域问题

开发环境下,借助vue cli简单解决跨域问题。

配置方式一:

在vue.config.js文件中添加以下代码:

devServer: {
    proxy: '被代理的基础路径'
}  

这种方式只能配置一个代理,并且不能控制什么时候走代理,如果在public文件夹中有同路径名字一样的文件,则不走代理。

配置方式二:

在vue.config.js文件中添加以下代码:

devServer: {
    proxy: {

        '路径前缀1': {
            target: '被代理的基础路径1',
            pathReview: { '^协议路径1': '' },
            ws: true,  // 用于支持websocket,
            changeOrigin: true, //代理服务器与被代理服务器通讯时会改变请求来源
        },

        '路径前缀2': {
            target: '被代理的基础路径2',
            pathReview: { '^协议路径2': '' },
            ws: true,  // 用于支持websocket, 默认值为true
            changeOrigin: true, // 用于控制请求头中的host值,默认值为true
        },
    }
}

该配置略繁琐,但是胜在灵活,可以配置多个代理目标,注意请求资源时必须加路径前缀。


该方法借助vue-cli实现,仅用于 开发环境,生产环境还需要后端人员做跨域处理。

猜你喜欢

转载自blog.csdn.net/weixin_59128282/article/details/125336088