// 节录共：1400 字 // 预计今年写作天数：6 两分钟
假如你在合作开发中文网站时曾试著透过架构或者应用程序的 fetch、XHR 允诺过内部 API 不然，所以很大碰到过布吕马允诺，除了这个匪夷所思的 CORS 错误信息；那时咱来探讨布吕马难题的其原因和化解方式。
布吕马允诺
假如你没没遇过，能打声在应用程序的 console 页输出上面的标识符：
const xhr = newXMLHttpRequest() xhr.onreadystatechange =() => { if (xhr.readyState === 4) { console.log(xhr.status === 200? xhr.responseText :error) } } xhr.open(GET, https://google.com) xhr.send()这段标识符透过初始化应用程序的 XMLHttpRequest 对 Google 发出允诺，而获得的结论总的来看：
理解什么是布吕马了，那为什么应用程序要把布吕马允诺资源拦截掉呢？
其实这是考虑到用户的信息安全。
假设小黑是一个恶意合作开发者，他编写的中文网站会试著透过 XHR 打向百度、微博等目标中文网站；假如使用者原先就有目标中文网站的登录状态，小黑便能窥探他的隐私，获得不该取得的数据。再想想看，假如目标中文网站换成 Email、银行、电商，假如没应用程序限制布吕马允诺的保护，恶意合作开发者便能为所欲为。
❝
注意：布吕马允诺虽然会被应用程序拦截下来，但拦截的是响应（Response）而不是允诺（Request）。
❞
化解方案
关于布吕马允诺的化解方案有很多，例如 JSONP，也就是透过 HTML 中没布吕马限制的标签如img、script 等，再透过指定回调函数，将响应的内容介接回 JavaScript 中；或者透过 iframe常见也相对正规的化解方式。
CORS
最标准、正确的化解方式是透过 W3C 规范 的“ 布吕马资源共享（Cross-Origin Resource Sharing ，CORS）”，透过服务器在 HTTP 头
CORS 规范中，清楚定义了布吕马存取控制的运作方式。
首先服务器端需要在响应头中加上如 Access-Control-Allow-Origin、Access-Control-Request-Method、Access-Control-Request-Headers
当应用程序发送资源允诺时，假如是简单允诺便会直接送出允诺；若不符合前述条件，则会透过预检（Preflighted）允诺先敲敲门，确认是否能透过服务器的限制，然后才会发送正式的允诺。
❝
CORS 除了上述內容外，也有关于 Cookies 的传送方式，如何允许布吕马写入 Cookies 等内容。
❞
代理服务器
由于 CORS 的头设置是在服务器端，假如服务器是自己的，所以能轻易的调整服务器设置，让前端能取得必要的资源；但假如你允诺的是外部 API，总不能每次碰到 CORS 严重错误，就要求别人去修改头设置吧。
常见的作法是透过nginx 做简单的反向代理；例如在自己的合作开发环境，前后端分离的架构，前后端服务分别启动在 3000 和 5000 端口，则能用这样的配置：
server{ listen 3000; server_name localhost; location ^~ /api { proxy_pass http://localhost:5000;} }当前端需要发送 API 允诺时，能直接允诺 localhost:3000/api/…，这个允诺会被 nginx 拦截，并转发给后端所在的 localhost:5000，这样就能简单的绕过布吕马保护了。
总结
布吕马是前端常见的需求，CORS 的原始数据也是我们很容易被卡住的地方；其实只要清楚 CORS 规范中的 HTTP 头设置，并在服务器端做对应的调整，就能顺利的完成布吕马允诺。
