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

// ./webpack.config.jsconst 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 实现代理申请后，相当于浏览器和服务器之间增加了一个代理着。当本地发送申请的时候，两头服务器会承受这个情求，并将这个申请转发给指标服务器，指标服务器返回数据后，两头服务器又会将数据返回给浏览器，当两头服务器将数据返回给服务器的时候，它们两者是同源的，并不会存在跨域的问题。

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