做过 web 合作开发的老师，如果都碰到过布吕马的难题，当他们从两个搜索引擎向另两个搜索引擎推送 Ajax 允诺的这时候，关上应用程序控制面板就会看见布吕马严重错误，那时他们就来谈谈布吕马的难题。
1. 应用程序的相混思路
相混的表述是：假如三个网页的*协定，*路由器（假如有选定）和*搜索引擎*都完全相同，则三个网页具备完全相同的源。相混思路管制了从同两个源读取的文档格式或JAVA怎样与源自另两个源的天然资源展开可视化。这是两个用作隔绝潜在性蓄意文档的关键安全可靠监督机制。
2. 布吕马原始统计数据造成的其原因
为的是表明难题，他们能做如下表右图试验，他们在邻近地区构筑了合作开发自然环境， 由应用程序 http://localhost:3001 向伺服器 http://localhost:3000 推送三个允诺，两个采用 javascript 触发器允诺统计数据，另两个采用 img 条码允诺统计数据，伺服器接到允诺后，列印接接到允诺的笔记，如下表右图图右图：
应用程序推送三个允诺
伺服器端列印笔记并处置允诺
官亭镇客户端应用程序的控制面板，能看见收到了三个允诺，因此都接到了状况码为 200 的积极响应，与此同时控制面板报了两个严重错误，即 xhr 允诺收起。继而他们能晓得，或许造成布吕马原始统计数据，其原因有下列四条：
应用程序端管制（伺服器端接到了允诺并恰当回到）推送的是 XMLHttpRequest 允诺（采用 img 条码推送的允诺为 json 类别，并不能收起）允诺了相同域的天然资源只有与此同时满足了这三个条件，应用程序才会造成布吕马严重错误。
3. 解决布吕马的思路
既然他们晓得了布吕马严重错误造成的其原因，那么解决思路就很直观了，针对出错的三个其原因展开相应的处置即可，相应的解决思路也有三个方向：
打破应用程序的管制不推送 XHR 允诺解决布吕马下文将分别展开阐述。
3.1 打破应用程序的管制
由上面分析结论可知，或许出现布吕马的严重错误，实际上是应用程序应用程序所做的管制，伺服器并未展开管制，因此他们能通过设置应用程序，使其不展开布吕马检查。实际上应用程序也提供了对应的设置选项。
以 MacOS 下的 Chrome 应用程序为例，在终端中采用命令
open -n /Applications/Google\ Chrome.app/ –args –disable-web-security –user-data-dir=/Users/your-computer-account/MyChromeDevUserData/关上应用程序，即可禁用 Chrome 应用程序的安全可靠检查功能，与此同时也会禁用布吕马安全可靠检查功能，这样再次拿前面的例子展开测试，发现此时不能收起，与此同时也能恰当拿到伺服器端回到的统计数据。
禁用应用程序安全可靠检查功能
这种方式虽然能实现布吕马，但是需要每个用户都对应用程序展开设置，与此同时可能导致潜在性的安全可靠隐患，正常情况下不实用。但这个例子充分表明了，布吕马严重错误是前端应用程序所做的管制，与后台服务无关。
3.2 JSONP实现布吕马
根据思路2，既然布吕马难题造成的其原因是因为应用程序推送了 Ajax 允诺，那么他们打破这个条件即可。具体实现方式就是采用 JSONP 来展开布吕马允诺。
JSONP，是 JSON with Padding 的简称，它是 json 的一种补充采用方式，利用 script 条码来解决布吕马难题。JSONP 是非官方协定，他只是前后端两个约定，假如允诺参数带有约定的参数，则后台回到 javascript 代码而非 json 统计数据，回到代码是函数调用形式，函数名即约定值，函数参数即要回到的统计数据。JSONP 的实现原理如下表右图图右图：
JSONP实现原理
首先在应用程序 js 中表述两个函数（假设名为 handler），然后动态创建两个 script 条码插入网页中，script 条码的 src 属性即要调用的地址，与此同时，在调用的 url 中加入两个伺服器端约定的参数（假设名为 callback，参数值为已表述的函数名 handler），伺服器端接到允诺，假如发现允诺的 url 中带有约定的参数，那么就回到一段函数调用形式的 javascript 代码，该段代码的函数名即为 callback 参数的值 handler，函数的参数即为待回到的统计数据。这样，应用程序拿到回到结果后就会执行 handler 函数，对回到的统计数据展开处置。
他们采用 jquery 向伺服器端推送两个 JSONP 格式的允诺，从应用程序控制面板能看见允诺和对应的积极响应，如下表右图图右图：
JSONP允诺
JSONP请求的积极响应
由上图能看见，推送JSONP允诺时，允诺的 Type 为 script 类别而非 xhr 类别，这样就打破了布吕马收起的三个必要条件，不能造成布吕马严重错误，与此同时也验证了伺服器端回到的统计数据格式为 javascript 代码调用的形式，其中 Jquery331045** 这一长串函数名是 jquery 自动生成的。
由于 JSONP 的原理是采用 script 条码来读取统计数据，所以它的兼容性很好，但是采用 JSONP 来解决布吕马难题存在下列缺陷：
只能推送 GET 允诺推送的不是 XHR 允诺，这样导致 XHR 允诺中的很多事件都无法展开处置伺服器端需要改动3.3 布吕马天然资源共享CORS
CORS 是两个 W3C 标准，全称是”布吕马天然资源共享”（Cross-origin resource sharing）。它允许应用程序向跨源伺服器，收到 XMLHttpRequest 允诺，从而克服了 AJAX 只能相混采用的管制。CORS 基于 http 协定关于布吕马方面的规定，采用时，应用程序应用程序直接触发器允诺被调用端伺服器端，在积极响应头增加积极响应的字段，告诉应用程序后台允许布吕马。
布吕马严重错误
回到文章开始的这个布吕马原始统计数据，可以看见严重错误的具体信息是：伺服器端没有设置
Access-Control-Allow-Origin 这个积极响应头从而导致收起，通过设置
Access-Control-Allow-Origin: * 这个积极响应头，他们能解决难题。但是，这种设置能满足所有情况吗？ 更进一步，采用 CORS 时应用程序怎样检查布吕马严重错误？ 前面他们有讲到，虽然应用程序收起，但是在这之前伺服器端已经接受了允诺，那么，应用程序总是先收到允诺后再展开判断吗？下面他们一一讨论。3.3.1 应用程序怎样检查布吕马严重错误
应用程序检查布吕马严重错误的基本原理是：
应用程序检测到 ajax 允诺的域与当前域不一致，会在允诺头中增加 Origin 字段，然后检查伺服器端响应头 Access-Control-Allow-Origin，假如不存在或不匹配，则报布吕马严重错误。应用程序检查布吕马严重错误原理
3.3.2 应用程序总是先收到允诺，然后根据是否有
Access-Control-Allow-Origin 积极响应头来判断吗答案是，对于简单允诺，是；而对于非简单允诺，不是。非简单允诺的情况下，应用程序并不是直接允诺所需天然资源，而是会先收到两个预检允诺，预检允诺通过后才会对所需天然资源展开允诺。
非简单允诺预检允诺
这里涉及到的简单允诺和非简单允诺的概念，那么简单允诺和非简单允诺有什么区别呢？MDN 对非简单允诺展开了表述，满足下列条件之一，即为非简单允诺：
采用了下列 HTTP 方法：PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH采用了除下列首部之外的其他首部：Accept、Accept-Language、Content-Language、Content-TypeContent-Type首部的值不属于下列其中两个： application/x-www-form-urlencoded、 multipart/form-data、 text/plain允诺中的 XMLHttpRequestUpload 对象注册了任意多个事件监听器允诺中采用了ReadableStream对象简单来说，除了他们平时采用最多的 GET 和 POST 方法，以及最常采用的 Accept、Accept-Language、Content-Language 和 类别为
application/x-www-form-urlencoded、 multipart/form-data、 text/plain 的 Content-Type 允诺头，其他基本都是非简单允诺。对于这些非简单允诺，应用程序会收到三个允诺，第两个为 OPTIONS 遇见允诺，遇见允诺的积极响应检查通过后才会收到对天然资源的允诺。非简单允诺过程
生产自然环境下，假如需要推送非简单布吕马允诺，每次三个允诺会增加积极响应时间，为此，W3C 标准中增加了另两个积极响应头 Access-Control-Max-Age 参数，该积极响应头表明了对于非简单请求的预检允诺应用程序的缓存时间，在缓存有效期内，非简单允诺能不推送预检允诺，另外，实际合作开发中，能在伺服器端设置接接到的允诺方法是 OPTIONS 时，直接回到 200，这样也能加快积极响应。
3.3.3 设置
Access-Control-Allow-Origin: * 就行吗带cookie的布吕马
当他们需要推送带 cookie 的允诺时，
Access-Control-Allow-Origin 直接设置为通配符 * 时是无法通过应用程序的检查的，此时该积极响应头的值必须与收到允诺的域完全匹配才行，另外，还需要设置
Access-Control-Allow-Credentials 积极响应头的值为 true，表示支持带 cookie 的布吕马允诺。3.3.4 CORS允诺头和积极响应头总结
允诺头：
Origin： 应用程序收到 Ajax 布吕马允诺之前会添加此头部，值为推送允诺的域Access-Control-Request-Method：采用了除 GET、POST 允诺方法之外的方法，应用程序会添加此头部，值为当前允诺方法Access-Control-Request-Headers：采用了自表述头部或除了Accept、Accept-Language、Content-Language、Content-Type 之外的头部，应用程序会添加此头部，值为当前的允诺方法积极响应头：
Access-Control-Allow-Origin： 表示伺服器端允许哪些域允诺天然资源Access-Control-Allow-Methods： 当应用程序包含 Access-Control-Request-Method 允诺头时，伺服器端需要积极响如果头部，值通常由 Reauest 的 header 中 Access-Control-Request-Method 取得Access-Control-Allow-Headers： 当应用程序包含 Access-Control-Request-Headers 允诺头时，伺服器端需要积极响如果头部，值通常由 Reauest 的 header 中 Access-Control-Request-Headers 取得Accdentials： 允许带 cookie 的布吕马允诺Access-Control-Max-Age： 预检允诺的缓存时间4. 总结
本文介绍了布吕马的其原因，重点介绍了采用 JSONP 和 CORS 解决布吕马难题的方法。除此之外，实际合作开发中还其他各种解决布吕马难题的思路，本质上，这些方法都是打破布吕马严重错误的三个条件，大家能自行查资料了解一下。
作者：腾讯云+社区
原文：
https://www.cnblogs.com/qcloud1001/p/10191996.html
