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

时间:2023-02-03 The..Fuir 人气:0

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请求识别
import axios from "axios";
// 只要发送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 ：检查代理的请求中是否有 /api ，有的话把 /api 替换为冒号后面的内容，案例为替换成空字符串，也就是删去 /api 。（^是正则表达式的内容，意思是限定开头）

本地请求 http://localhost:8080/api/zzz/one ->
代理后请求 http://XX.XX.XX.XX:8084/api/zzz/one ->
设置pathRewrite后的请求 http://XX.XX.XX.XX:8084/zzz/one
所以代理完成后真正发送给后端的请求就是 http://XX.XX.XX.XX:8084/zzz/one 啦。

1.统一给请求添加/api方便监测代理 2.统一删去/api发送正确的请求）

注意：小伙伴们可能会看到浏览器中右键检查打开的控制台中，网络->标头->常规，中的请求网址显示的还是 http://XX.XX.XX.XX:8084/api/zzz/one 。
这是因为浏览器的同源策略，经过代理设置的请求发送给后端已经变成 http://XX.XX.XX.XX:8084/zzz/one 没有/api 的形式了，不用被浏览器显示的请求网址干扰。
如果实在不想看到浏览器的请求网址中有api，可以采用方法1。

什么是跨域？

JavaScript同源策略：当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。

不同域之间相互请求资源，就算作“跨域”。

同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。**同源策略限制：**表单提交、AJAX请求等。

注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

proxy代理解决跨域

**原理：**浏览器是禁止跨域的，但是服务端不禁止，在本地运行npm run serve等命令时实际上是用node运行了一个服务器，因此proxyTable实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了一层代理，因此不会出现跨域问题。

当我们在用本机去找服务器要数据时会产生跨域问题，所以利用vue-cli去开启一个代理服务器。

配置（vue.config.js）

方法一

优点：配置简单、请求资源时直接发给前端（8080）即可

缺点：不能配置多个代理，不能灵活的控制请求是否走代理

当请求了前端不存在的资源时，该请求会转发给服务器(优先匹配前端资源)

 module.exports = {
     devServer: {
             proxy: 'http://localhost:5000',
     }
 }

方法二

优点：可以配置多个代理，且可以灵活的控制请求是否走请求

缺点：配置繁琐，请求资源时必须加前缀

//开启代理服务器(方法二)
    devServer: {
        proxy: {
            //  '/yu'为请求前缀，用于控制是不是走代理，想走代理时就在请求前缀前边加上这个请求前缀
            '/yu': {
                target: 'http://localhost:5000',
                pathRewrite: { "^/yu": "" }, //重写路径  匹配以/yu为开头的路径都变为空字符串 
                ws: true, //用于支持websocket
                changeOrigin: true //用于控制请求头中的host值
            },
            '/demo': {
                target: 'http://localhost:5001',
                pathRewrite: { "^/demo": "" },
                ws: true, //用于支持websocket
                changeOrigin: true //用于控制请求头中的host值
            },
        }
    }

请求时：

请求前缀必须跟着端口号

getStudents() {
      axios.get("http://localhost:8081/yu/students").then(
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },
    getCars() {
      axios.get("http://localhost:8081/demo/cars").then(
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },

1.vue-cli 2 是在路径为config/index.js的文件下proxyTable里配置的，该文件是整个项目的主要配置入口

// node自带路径工具.
var path = require('path')
// 分为两种环境，dev和production
module.exports = {
  dev: {
    // 配置好后一定要关闭原来的server，重新npm run dev启动项目。不然无效。
    proxyTable: {   // 需要代理的接口，可以跨域
      // 用‘/api'开头，代理所有请求到目标服务器
      '/api': {
            target: 'http:xxx.com', // 目标接口域名
            changeOrigin: true, // 是否启用跨域
            pathRewrite: { //这里要理解成用'/api'代替target里面的地址，后面的组件中我们调用接口的时候直接用api代替，比如我要调用'http://40.00.100:3002/user/add'，直接写成'/api/user/add'即可
              '^/api': ''  // 即/api相当于http://40.00.100:3002
            }
        }
     }
  }
}

注意：‘/api’ 为匹配项，因为在 ajax 的 url 中加了前缀 ‘/api’，而原本的接口是没有这个前缀的，所以需要通过 pathRewrite 来重写地址，将前缀 ‘/api’ 转为 ‘/’。

如果本身的接口地址就有 ‘/api’ 这种通用前缀，就可以把 pathRewrite 删掉。

2.vue-cli 3 是自己在根目录下新建vue.config.js文件，在devServer.proxy对象里配置（当然也有其他方式），配置后会和隐藏的配置自动进行整合

module.exports = {
    // cli3 代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换
    devServer: {
      proxy: {
        '/yourapi': {   //代理api，/yourapi的意义在于，声明axios中url已/api开头的请求都适用于该规则，注意是以/yourapi开头，即：axios.post({url: '/yourapi/xxx/xxx'})
          target: 'yourserver',   //服务器真实api地址，即需要请求的目标接口，此处target的意义在于：造成跨域是因为访问的host与我们的请求头里的origin不一致，所以我们要设置成一致，这个具体请看下文
          changeOrigin: true,    //是否跨域，true为开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
          ws: true, // 是否启用websockets，根据实际情况看是否需要配置该项
          pathRewrite: { 
               '^/yourapi': 'https://我是服务器/api'   //重写路径
        // 此处是大部分文章都不会明说的的地方，
        // 既然我们设置了代理，则所有请求url都已写成/yourapi/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢
        // 因此这里的意义在于， 以 /yourapi开头的url请求，代理都会知道实际上应该请求那里，
        // ‘我是服务器/yourapi'，后面的/api根据实际请求地址决定，即我的请求url：/yourapi/test/test，被代理后请求的则是
        // https://我是服务器/yourapi/test/test
          } 
        }
      }
    }
  }

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

加载全部内容