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