代理服务器

Mr.Xmln2024年11月17日大约 2 分钟

当页面向服务器发送请求的时候会遵循同源策略，这一策略能帮助阻隔恶意文档，减少可能被攻击的媒介。例如，它可以防止互联网上的恶意网站在浏览器中运行 JS 脚本，从第三方网络邮件服务（用户已登录）或公司内网（因没有公共 IP 地址而受到保护，不会被攻击者直接访问）读取数据，并将这些数据转发给攻击者

对于源的定义：如果两个 URL 的协议、端口（如果有指定的话）和主机都相同的话，则这两个 URL 是同源的。这个方案也被称为“协议/主机/端口元组”，或者直接是“元组”。（“元组”是指一组项目构成的整体，具有双重/三重/四重/五重等通用形式。）

所以前后端分离的时候是会有同源策略也就是跨域的问题。当然，如果是服务器向服务器发送请求的话是不会存在同源的问题

Vue脚手架由自带的内置服务器只不过没有开启代理机制

文档

简单开启

在 vue.config.js 文件中添加如下配置

devServer: {
    proxy: "http://localhost:8080"
}

含义：vue内置服务器负责代理访问8080服务器

原理：去访问的地址是 http://localhost:80/api 前面是vue的地址（也可以不写 http://localhost:80 效果一样），后面是访问的路径，vue会优先去自己的服务内寻找 /api 的资源。如果没有找到那么就会去配置的代理服务器上找资源。也就是会访问 http://localhost:8080/api

这种简单代理不支持配置多个代理

高级开启

devServer: {
  proxy: {
    // 凡是请求路径是 /api 开始的都走这个代理
    '/api': {
      target: '<url>',
      ws: true,
      changeOrigin: true
    },
    '/foo': {
      target: '<other_url>'
    }
  }
}

更多的代理控制行为，可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware