webpack(六）——webpack 解决跨域的原理

2021-08-09 15:35:45

一什么是跨域？

　　主要是由于浏览器的同源策略引用的，同源策略是浏览器的安全机制，当协议，域名，端口三者有一个不同，浏览器就禁止访问资源。

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

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

参考文章：

　　　　　　https://mp.weixin.qq.com/s/6nQ-m9HL3-FENv6vF4dOnQ

　　　　　　https://www.cnblogs.com/rockmadman/p/6836834.html，

　　　　　　https://juejin.cn/post/6844903496521613320

webpack(六）——webpack 解决跨域的原理

码农公寓

相关文章