背景

我们平时在开发项目的时候，总会涉及到调用接口，调用接口就会涉及到跨域问题，那我们平时是怎么去解决跨域问题的呢？

• Cors： 后端开启跨域允许
• Nginx： 后端配置允许跨域的手段

其实就我接触过的项目，Cors 比较少用，倒是Nginx比较多用~

思考

我们刚刚说了，Nginx是后端配置允许跨域的手段，他的原理其实就是接口转发~

我们想想跨域是因为什么？跨域是因为同源策略，而同源策略只是局限在浏览器而已，所以我们只要不在浏览器上请求，那就能解决跨域问题~

而Nginx大致原理就是这样的，就是让你在服务器上去发起请求，这样就能解决跨域问题了。但是我们的请求是在浏览器上去发起的啊，怎么才能让我们的请求在服务器上去发起呢？所以就有了接口转发 这个概念

举个例子，现在有一个接口http://api.com:5000，我们浏览器直接去访问的话会有跨域报错，所以我们可以让后端在服务器上起一个 Nginx 服务，我们自己的服务器是 http://sunshine.com，起的 Nginx 端口是 3000，并让后端在 Nginx 上配置了接口转发的逻辑

一切准备就绪我们现在想要访问 http://api.com:5000 ，只需要访问 http://sunshine.com :3000，它会帮我们去转发请求 http://api.com:5000，这个时候请求就是服务器去发起的，这就解决了跨域问题~

前端怎么做？

刚刚说的 Nginx 都是需要后端去配的，一般也是测试环境、生产环境的时候，才会让后端去配这个~

但是如果是本地开发的时候，没有后端 Nginx 支持的时候，我们前端自己要怎么做呢？其实前端构建工具为我们提供了解决跨域的手段，那就是代理

Webpack和Vite都为我们提供了代理的配置

module.exports = {
  // ...其他配置...
  devServer: {
    port: 3000,
    proxy: {
      '/': {
        target: 'http://api.com:5000'
      },
    },
  },
};

其实跟接口转发没两样，只不过换了个转发的服务器罢了。

Nginx 是需要后端在服务器上去搭建一个端口服务来进行转发

而我们前端在本地开发时也可以做类似的事情，就是可以在本地起一个 Node 服务，然后让这个 Node 服务来帮我们做接口转发，就不需要 Nginx 了~所以我们会看到，我们配置了 proxy 之后，我们访问http://localhost:3000，但是实际访问到的是http://api.com:5000

所以Webpack和Vite解决跨域的方式就是接口转发，方式就是在本地起一个 Node 服务来进行接口转发

http-proxy

那是Webpack和Vite是怎么去起 Node 服务去进行接口转发的呢？其实他们底层实现的原理都是一样的，都是用到了一个库http-proxy，这是一个专门做代理转发的库

就拿刚刚的例子来说吧，我想要访问http://localhost:3000，但是实际访问到的是http://api.com:5000，所以需要这么去用http-proxy

const httpProxy = require("http-proxy");

httpProxy
  .createServer({
    // 目标接口
    target: "http://api.com:5000",
  })
  .listen(3000);

其实 http-proxy 的原理也不复杂，拿上面例子来讲，主要分为几步

• 使用 http 模块监听本地 3000 端口
• 监听到请求了本地 3000 端口，对请求数据进行处理
• 拿着处理好的数据去通过 http 请求 http://api.com:5000
• 处理响应结果，并返回给 本地 3000 端口的服务

源码也不多，大家可以有空多看看这种超级牛的老库，学习学习人家的编码思想~