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

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

 

参考文章:

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

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

      https://juejin.cn/post/6844903496521613320

 

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

上一篇:微信自动跳转默认浏览器 微信扫一扫直接打开外部浏览器


下一篇:群发技术-使用python3给微信好友群发消息