vue项目配置代理如何解决跨域问题.docxVIP

第

vue项目配置代理如何解决跨域问题

目录Vue项目配置代理1.这里以axios发请求为例2.如果发送的请求都以/abc开头3.代理多个接口什么是跨域？配置（vue.config.js）总结

Vue项目配置代理

前端向服务器发送请求时，经常会遇到跨域问题，那么什么是前端跨域呢？

在vue项目中如何利用代理解决呢？

1.这里以axios发请求为例

axios.get(/abc/def);

axios.get(/abc/ghi);

axios.post(/abc/jkm);

axios发送的请求是本地的服务器地址拼接上发送的请求，如http://localhost:8080/abc/def

2.如果发送的请求都以/abc开头

那么我们就可以在proxy中进行服务器代理配置。

devServer:{

??proxy:{

???/abc:{

????target:http://XX.XX.XX.XX:8081,

????changeOrigin:true,

????ws:true,

????secure:false,

???},

??},

},

/abc:{}:引号中代表监测的是以/abc开头的接口

target:代表监测到以/abc开头的接口后，把axios请求中前面的本地服务器地址改为后端接口地址，实际发送给后端的请求就是下方后一个请求

http://localhost:8080/abc/def--http://XX.XX.XX.XX:8081/abc/def

changeOrigin:是否跨域ws:如果要代理websockets，配置这个参数secure:如果是https接口，需要配置这个参数（如果是http接口，也可以不写这个参数）pathRewrite：替换请求中匹配的内容。在3的方法2中详细解释用法，上方未使用此参数

3.代理多个接口

http://localhost:8080/zzz/one

http://localhost:8080/xxx/two

方法1：监测多个接口，可以在proxy中写多个配置：（适用于target不同的代理，相同也可以用这个方法，就是会麻烦一点，对于相同的target方法2会比较方便）

devServer:{

??proxy:{

????/zzz:{

?????target:http://XX.XX.XX.XX:8082,

?????changeOrigin:true,

?????ws:true,

????},

????/xxx:{

?????target:http://XX.XX.XX.XX:8083,

?????changeOrigin:true,

?????ws:true,

????},

??},

},

那么实际发送给后端的请求就是：

http://XX.XX.XX.XX:8082/zzz/one

http://XX.XX.XX.XX:8083/xxx/two

方法2：使用axios进行前设置（适用于target相同的代理）

//一般在全局设置里引入，例如main.js，方便第二行的配置被每一个axios请求识别

importaxiosfromaxios;

//只要发送axios请求，就在请求前加入/api的开头，例如/zzz/one-/api/zzz/one

axios.defaults.baseURL=/api;??

进行了上方的配置后，在本地发送的请求会变为

http://localhost:8080/api/zzz/one

http://localhost:8080/api/xxx/two

而后可以设置只监听/api的代理，不过要设置pathRewrite参数：

devServer:{

??proxy:{

????/api:{

??????target:http://XX.XX.XX.XX:8084,

??????changeOrigin:true,

??????ws:true,

??????pathRewrite:{

???????^/api:,

??????},

????},

??},

},

pathRewrite