首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue配置代理

Vue配置代理(devServer)解决跨域问题

2024-08-10 10:49:53 作者：藏蓝色攻城狮

这篇文章主要介绍了Vue配置代理(devServer)解决跨域问题,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

1、作用：

Vue官方文档的解释是：

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

通俗的说，就是为了解决跨域问题。

2、用法：

本篇都以axios发请求为例,样例如下：

axios.get("/abc/def");
axios.get("/abc/ghi");
axios.post("/abc/jkm");

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

2.1 指定请求开头配置

如果发送的请求都以 /abc 开头，代理配置：

devServer: {
    proxy: {
      "/abc": {
        target: "http://XX.XX.XX.XX:8081",
        changeOrigin: true,
        ws: true,
        secure: false,
      },
    }
},

“/abc”:{} : 引号中代表，本代理配置，会检测以 /abc 开头的访问
target : 代表检测到以 /abc 开头的接口后，将请求中端口、地址，修改为后端接口地址，从而避免发生跨域问题
changeOrigin : 是否修改数据包中host参数，默认为true
ws : 是否代理 websockets
该代理请求为：

http://localhost:8080/abc/def —> http://XX.XX.XX.XX:8081/abc/def

2.2 代理多个接口

请求示例：

// http://localhost:8080/zzz/one
axios.get("/zzz/one");
// http://localhost:8080/xxx/two
axios.get("/xxx/two");

代理多接口方式1

监测多个接口，可以在proxy中写多个配置

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,
        },
    },
},

代理多接口方式2

配置axios

// 只要发送axios请求，就在请求前加入/api的开头，例如 /zzz/one -> /api/zzz/one
axios.defaults.baseURL = "/api"; 
/*
进行了上方的配置后，在本地发送的请求会变为
http://localhost:8080/api/zzz/one
http://localhost:8080/api/xxx/two
*/

配置代理

devServer: {
    proxy: {
        "/api": {
            target: "http://XX.XX.XX.XX:8084",
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              "^/api": "",
            },
        },
    },
},
//pathRewrite ：检查代理的请求中是否有 /api ，有的话把 /api 替换为冒号后面的内容，案例为替换成空字符串，也就是删去 /api 。（^是正则表达式的内容，意思是限定开头）

3、常见参数

target："xxx",            // 要使用url模块解析的url字符串
forward："xxx",           // 要使用url模块解析的url字符串
agent：{},                // 要传递给http(s).request的对象
ssl：{},                  // 要传递给https.createServer()的对象
ws：true/false,           // 是否代理websockets
xfwd：true/false,         // 添加x-forward标头
secure：true/false,       // 是否验证SSL Certs
toProxy：true/false,      // 传递绝对URL作为路径（对代理代理很有用）
prependPath：true/false,  // 默认值:true 指定是否要将目标的路径添加到代理路径
ignorePath：true/false,   // 默认值:false 指定是否要忽略传入请求的代理路径
localAddress："xxx",      // 要为传出连接绑定的本地接口字符串
changeOrigin：true/false, // 默认值:false 将主机标头的原点更改为目标URL

到此这篇关于Vue配置代理(devServer)，解决跨域问题的文章就介绍到这了,更多相关Vue配置代理(内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！