webpack(六）——webpack 解决跨域的原理
一 什么是跨域？
主要是由于浏览器的同源策略引用的，同源策略是浏览器的安全机制，当协议，域名，端口三者有一个不同，浏览器就禁止访问资源。
如下 url 上的源是：http://www.company.com:80
如果地址里面的协议，域名，端口号都相同就是属于同源的。
* http://www.a.com/dir/page.html ----成功
* http://www.child.a.com/test/index.html ----失败，域名不同
* https://www.a.com/test/index.html ----失败，协议不同
* http://www.a.com:8080/test/index.html ----失败，端口号不同
不受同源策略限制的有：
* 页面中的连接，重定向以及表单的提交是不会收到同源策略的影响的；
* 跨域资源的引入是可以的，但是js不能读写加载的内容，如嵌套到页面中的<script src='....'></script>,<img>,<link>,<iframe>
严格的来讲：浏览器并不是全部禁止跨域资源的请求，它只是禁止对跨越资源的读操作。浏览器的同源限制策略是这样的：
* 浏览器允许跨域写操作，如连接，重定向；
* 浏览器允许跨域资源嵌入，如img，script标签。
* 浏览器不允许跨域读操作
二 解决跨域的方法？
最常用的解决跨域的常用的方法有JSONP,CORS
（1）使用JSONP来解决跨域
实现原理：a.com/jsonp.html 想要得到 b.com/main.js 里面的数据，可以在 jsonp.html 里面创建一个回调函数 xxx,动态的添加 <script>元素，向服务器发送请求，请求地址后面提那就上查询的字符串，通过回调函数callback 参数指定回调函数的名称，请求地址为 http://b.com/main.js?callbcak=xxx,在main 里面调用这个回调函数xxx ,并且一JSON数据形式作为参数传递，完成回调
// jsonp.html // 创建一个script标签 function addScriptTag(src){ var script=document.createElement('script'); script.setAttribute('type','text/javascript'); script.src=src document.body.appendChild(script); } // 页面加载完毕后创建一个script标签 window.onload=function(){ addScriptTag('http://b.com/main.js?callback=foo'); } function foo(data){ console.log(data.name+'欢迎你') }
main.js里面的代码：
foo({name:'张三'})
JSONP 方法的缺点：
* 使用这种方法，只要是个网站都可以拿到 b.com 里面的数据，存在着安全性的问题；
* 只能发送get 请求，不能发送 POST 请求；
* 可能会被注入恶意代码，篡改页面内容，可以采用字符串过滤来规避此问题。
（相关链接：）
（2）使用CORS 来解决此方法
CORS 是一个W3C标准，全称是跨域资源共享，它允许浏览器向跨域资源服务器，发起 XMLHttpRequest 请求，从而克服了AJAX 只能同源使用的限制。
在刚才的列子里面，可以在 b.com 里面添加响应头允许 a.com 的访问，代码如下：
Access-Control-Allow-Origin:http://a.com
然后a.com 就可以用ajax 获取 b.com 里的数据了。
三 webpack解决跨域？
webpack proxy ,就是 webpack 提供的解决跨域的方案。
其基本行为是接受客户端发送的请求后转发给其他的服务器，目的是为了便于开发者在开发的模式下解决跨域的问题。
要想实现代理必须要一个中间服务器， webpack 提供服务器的工具是 webpack-dev-server,只适用于开发阶段。
可以在webpack 配置对象属性中通过 devServer 属性来配置：如下
// ./webpack.config.js const path = require('path') module.exports = { // ... devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 9000, 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 实现代理请求后，相当于浏览器和服务器之间添加了一个代理着。当本地发送请求的时候，中间服务器会接受这个情求，并将这个请求转发给目标服务器，目标服务器返回数据后，中间服务器又会将数据返回给浏览器，当中间服务器将数据返回给服务器的时候，它们两者是同源的，并不会存在跨域的问题。
服务器和服务器之间是不会存在跨域资源的问题的。
参考文章：
