vue 请求代理 proxy_proxy vue

目录

为什么需要配置代理

什么是同源策略

如何配置代理

请求代理的原理

举例说明

---

为什么需要配置代理

      因为浏览器的同源策略，当向和本地 devServer 服务器不同源的地址发送请求，

      会违反浏览器的同源策略，导致发送失败，所以需要配置本地服务器代理请求

什么是同源策略

      同源策略是浏览器厂商提出的web安全策略，是浏览器最核心也最基本的安全功能，

      同源即：协议（http等）相同，域名（www.baidu.com等）相同，端口（8080等）相同，

      只要有一个不同就违反了同源策略

如何配置代理

        在 vue devServer服务器配置文件 vue.config.js 的 devServer 选项中配置 proxy

// 本地服务器配置
devServer: {
    proxy: {
        // '/api'可以是字符串形式的任何值，表示以/api开头的请求，
        // 实际项目中所以路径以/api开头的请求都会被本地服务器转发
        "/api": {
            // target指想要被代理的后端接口服务器地址(目标路径)(真正需要请求的服务器地址)
            target: 'http://192.168.3.122:1100',
            // 设置为true后，请求头中的host值会被设置成目标URL(target)中的host值
            changeOrigin: true,
            // pathRewrite用以在发送请求时，重写请求路径
            // 如果在实际的请求路径中你不希望出现/api，可以重写路径，在请求路径中去掉/api
            // 假设接口服务地址为：http://192.168.3.122:1100，接口路径为/company/list
            // 假设你的 baseURl 为/api，那么请求路径就会变成：http://192.168.3.122:1100/api/company/list，路径中多余/api
            // 那么你可以通过重写（如下方式）去掉/api，具体的使用根据业务来决定
            pathRewrite: {
               '^/api': ''
            }
         }
    }
}

请求代理的原理

一句话总结：服务器不受同源策略的影响

因为服务器不受同源策略的影响，所以可以使用本地 devServe 服务器将请求代理到目标服务器上。

所以前端需要先向本地服务器发送请求，通过 proxy 的代理配置，本地服务器就可以将我们的请求代理到目标服务器上。

解释1：如果前端请求没有服务器地址（域名或ip），浏览器会在前面默认加上当前页面所属服务器地址（开发环境为devServer服务器地址），服务器先在自己身上寻找对应资源，找不到时服务器就会判断当前请求地址和我们配置的代理信息是否符合，符合的话就去帮我们发送请求。

假设有一本地启动前端项目，和后端接口服务器

前端地址为：http://localhost:8083（本地 devServer 服务器地址）（以下简称本地地址）

后端接口服务地址为：http://192.168.3.122:1100（真正请求的服务地址）（以下简称接口地址）

假设 baseURL 为接口地址会跨域，那么可以将 baseURL 设置为本地地址并添加代理路径，向本地服务器发送请求，或者设置 baseURL 为 /api，那么请求同样会指向本地服务器（见解释1），通过配置本地服务器 proxy 代理设置（如上设置），将请求中包含 /api 的请求代理到目标服务器上（有点类似nginx代理）。

因为 proxy 中配置的是对某一具体路径的请求的代理，所以 URL 路径中必须包含配置的路径，否则不会被代理。如 baseURL 如果为本地地址，则需要在 baseURL 中添加一个路径标识，并在 proxy 中配置标识的代理设置，才能正确代理。

举例说明

接口服务地址：http://192.168.3.122:1100

前端服务地址：http://localhost:8083（开发环境）

如果需要将请求通过前端服务代理到接口服务地址，可以配置前端 baseURL 为 /api 或者 http://localhost:8083/api

如果接口路径为 /login（登录）

本地请求全路径为：http://localhost:8083/api/login，接口路径多余 /api

代理设置 changeOrigin 为 true，则 localhost:8083 会被替换为 192.168.3.122:1100

此时请求全路径变为 http://192.168.3.122:1100/api/login

代理设置 pathRewrite 重写请求路径 /api 为 " "

最终路径为 http://192.168.3.122:1100/login，可以成功发送请求

~~完~~