Vue配置代理解决跨域-CSDN博客

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

我们在发送数据请求的时候经常会遇到跨域的情况。

如我们使用axios向http://localhost:5000/test端口发送请求结果跨域了

解决跨域请求有如下几种方式后端设置corsjsonpvue-cil配置代理。

配置代理可以理解为Vue为你开了一台和你端口号相同的服务器将浏览器和服务器之间的通话转化为服务器与服务器之间进行通话。

一、方式一

一配置代理服务器

在vue.config.js文件下配置代理服务器

devServer: {

proxy:'xxx' // 服务器端口

}

注意这里的端口是目标访问服务器的端口号

二发送axios请求

发送axios请求的端口号为本机端口号

以上步骤完成后即可解决请求跨域问题

三使用该方式的缺点

1. 不能配置多个代理。

2. 不能灵活地控制该请求是否走代理。

二、方式二

一配置代理服务器

如果使用该写法就能够配置多个代理服务器还能灵活控制是否走代理。

在vue.config.js中配置代理服务器

devServer: {

proxy: {

// 配置所有以 '/api1' 开头的请求路径

'/api1': {

target: 'xxx', // 代理目标的端口路径

pathRewrite: { '^/api1': '' }, // 替换请求路径中的字符

changeOrigin:true // 是否更改配置代理服务器的端口号

},

// 配置所有以 '/api2' 开头的请求路径

'/api2': {

target: 'xxx',

pathRewrite: { '^/api1': '' },

changeOrigin:true

},

}

}