Webpack和Vite能解决跨域问题？凭什么？
前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~
背景
我们平时在开发项目的时候，总会涉及到调用接口，调用接口就会涉及到跨域问题，那我们平时是怎么去解决跨域问题的呢？
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 端口的服务
源码也不多，大家可以有空多看看这种超级牛的老库，学习学习人家的编码思想~
结语
我是林三心
一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手； 一个偏前端的全干工程师； 一个不正经的掘金作者； 逗比的B站up主； 不帅的小红书博主； 喜欢打铁的篮球菜鸟； 喜欢历史的乏味少年； 喜欢rap的五音不全弱鸡
如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球rap，可以来俺的摸鱼学习群哈哈，点这个，有7000多名前端小伙伴在等着一起学习哦 -->
广州的兄弟可以约饭哦，或者约球~我负责打铁，你负责进球，谢谢~