proxy代理的使用（解决跨域，配置多个代理）

您所在的位置：网站首页 › ps4连接网络显示proxy服务器 › proxy代理的使用（解决跨域，配置多个代理）

proxy代理的使用（解决跨域，配置多个代理）

2023-09-14 15:57| 来源: 网络整理| 查看: 265

proxy代理的使用（解决跨域，配置多个代理）一、什么是代理？

字面意思可以理解为中间商，开启代理，原理就是在本地创建一个虚拟服务器，发送请求数据，同时接受请求的数据，利用服务器与服务器间，交互，不会有跨域问题，也是完全只靠前端自己独立解决跨域的方式。

以Vue-cli3实例

我现在需要请求的接口是如下：

https://www.baidu.com/api/search/get

然后我们在vue.config.js文件中设置proxy

devServer: { proxy:{ "/api": { target: "http://www.baidu.com", // 当我们发送请求时的URL中有/api时，会将在/api前面的路径替换成target的值。 changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite: { //重写匹配的字段，如果不想出现在请求路径上，可以重写为"" "^/api": "/api" } }, }, }

当我们创建Axios时，设置baseURL如下

const service = axios.create({ baseURL: /api, /* 定义请求路径的前缀 */ timeout: 5000 /* 定义超时时间 */ })

创建的请求

export function getData(){ return request({ url:"/search/get", method:"get" }) }

此时你发送的请求路径会被拼接为target+baseURL+url

http://www.baidu.com/api/search/get

当你想要配置多个代理时，只需设置多个匹配字段即可

devServer: { proxy:{ "/api": { target: "http://www.baidu.com", changeOrigin: true, pathRewrite: { "^/api": "/api" } }, "/user": { target: "http://www.baidu.com", changeOrigin: true, pathRewrite: { "^/user": "/user" } }, }, }

创建Axios时，设置baseURL如下

const service = axios.create({ baseURL: /, timeout: 5000 })

创建的请求

export function getData(){ return request({ url:"api/search/get", method:"get" }) } export function getData1(){ return request({ url:"user/search/get", method:"get" }) }

【本文地址】

proxy代理的使用（解决跨域，配置多个代理）

proxy代理的使用（解决跨域，配置多个代理）

今日新闻

推荐新闻