webpack解决跨域及其原理

Posted 2021-09-13 Liane

跨域问题的产生：浏览器用于隔绝潜在恶意文件的安全机制-同源策略限制非同源之间的资源进行交互。
webpack使用proxy解决跨域问题。
基于webpack-dev-server，只适合开发阶段。
配置如下：

// ./webpack.config.js
const path = require(\'path\')

module.exports = {
    // ...
    devServer: {
        contentBase: path.join(__dirname, \'dist\'),
        compress: true,
        port: 9000,
        //配置proxy
        proxy: {
            \'/api\': {
                target: \'https://api.github.com\'
            }
        }
        // ...
    }
}

devServer里面的proxy就是关于代理的配置，该属性是一个对象，对象中的每一个规则就是一个代理的规则匹配，属性的名称是需要被代理的请求路径前缀，一般为了辨别都会被设置为/api，值为对象的代理匹配规则，对应如下：

• target: 表示的是代理到的目标地址
• pathRewrite:默认情况下，我们的/api-hy也会被写到RUL 中，如果希望删除，可以使用 pathRewrite
• secure ：默认情况下不接受转发到 https 的服务器上的，如果希望支持，可以设置为 false
• changeOrigin: 它是表示是否更新代理后请求的 headers 中的 host 地址

原理：
proxy 工作原理上市利用 http-proxy-middleware 这个http 代理中间件，实现请求转发给其他的服务器。如下：在开发阶段，本地地址是

Http://loaclhost:3000 , 该浏览器发送一个前缀带有 /api 标识的向拂去器请求数据，但是这个服务器只是将这个请求转发给另一台服务器：

const express = require(\'express\');
const proxy = require(\'http-proxy-middleware\');

const app = express();

app.use(\'/api\', proxy({target: \'http://www.example.org\', changeOrigin: true}));
app.listen(3000);

// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar

　　在开发阶段，webpack-dev-server 会自动启动一个本地开发服务器，所以我们的应用在开发阶段是独立运行在 localhost 的一个端口上的，而后端服务器又是运行在另一个地址上

　　所以在开发阶段中，由于浏览器的同源策略，当本地访问的时候就会出现跨域资源请求的问题，通过设置 webpack proxy 实现代理请求后，相当于浏览器和服务器之间添加了一个代理着。当本地发送请求的时候，中间服务器会接受这个情求，并将这个请求转发给目标服务器，目标服务器返回数据后，中间服务器又会将数据返回给浏览器，当中间服务器将数据返回给服务器的时候，它们两者是同源的，并不会存在跨域的问题。

　　服务器和服务器之间是不会存在跨域资源的问题的。