乐趣区

关于webpack:webpack解决跨域及其原理

jiezi

跨域问题的产生：浏览器用于断绝潜在歹意文件的平安机制 - 同源策略限度非同源之间的资源进行交互。
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 实现代理申请后，相当于浏览器和服务器之间增加了一个代理着。当本地发送申请的时候，两头服务器会承受这个情求，并将这个申请转发给指标服务器，指标服务器返回数据后，两头服务器又会将数据返回给浏览器，当两头服务器将数据返回给服务器的时候，它们两者是同源的，并不会存在跨域的问题。

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

退出移动版