浏览器解决跨域，本地node代理原理

前言

在我们本地开发的时候，不论你是用vue-cli vite webpack等起的项目，大家都会做一个dev proxy的配置，来解决跨域问题。

我们来看看为什么浏览器会报跨域问题，是因为浏览器的同源策略（详细可参考MDN链接）

同源指的是：两个 URL 的协议,端口,和主机(host)都相同的话，则这两URL是同源的

来看看👇下图

截屏2023-04-27 下午6.30.39.png

而当我们的请求不符合同源策略的时候，就会出现下面的报错

截屏2023-04-27 下午6.39.48.png

代理服务器解决问题

未命名文件-2.png

从上面这个图中可以看出，符合同源策略所以不跨域，但是问题来了

为什么node代理服务器访问远端就不跨域？

上面说了，跨域问题是浏览器的同源策略的安全机制引起的，服务器之间是不存在跨域问题的，这也不是说服务器之间没有安全机制，只是服务器之间的调用无论是通过http访问还是通过rpc调用都是协议层面的机制，并没有限制必须同源。这也就是Node层跨域的实质

不同框架的代理设置

分享一个在react项目中用到的一个中间件配置写法

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            // target: 'http://localhost:8001/',
            target: 'https://lingdong.58corp.com/',
            changeOrigin: true
        })
    );
};