无须麻烦事后端老师的处置布吕马难题

甚么是布吕马

每每他们允诺后端辨识后关上控制面板时假如再次出现了No ‘

Access-Control-Allow-Origin’ header is present on the requesting resource 所以这首诗可能会协助到你。

布吕马是指在页面中，当三个页面企图去出访相同搜索引擎下的天然资源时（比如说推送Ajax允诺、采用iframe读取其它页面等），会受相混思路的限

甚么是相混思路

相混指的是协定、搜索引擎、路由器都完全相同的三个邮箱。

比如：假如您要从domain1.com/api 向domain1.com 明确提出允诺，则该允诺将透过。

假如提出向另三个域的允诺，www.domain2.com/api ，应用程序将制止允诺。

为甚么应用程序须要有布吕马

应用程序或许管制布吕马出访，是所致安全可靠考量。

假如应用程序不管制布吕马出访，所以普通采用者就能假造允诺，出访采用者在其它中文网站上的脆弱重要信息或继续执行蓄意操作方式。

举三个单纯的范例:

假定被害者在中文网站A上登入了他们的帐户，普通采用者在中文网站B上正式发布了三个诱骗采用者点击的链接，链接指向三个蓄意中文网站C，该中文网站C采用JavaScript代码向中文网站A发起了三个布吕马允诺，偷取了被害者在中文网站A上的脆弱重要信息（比如cookie、采用者名、密码等）。

普通采用者能将以下代码嵌入到中文网站C中，采用XMLHttpRequest对象向中文网站A发起布吕马允诺：

var xhr = new XMLHttpRequest(); xhr.open(“GET”, “http://www.domain2.com/user-info”, true); xhr.onreadystatechange =function() { if (xhr.readyState == 4) { alert(xhr.responseText); 器上 // … } } xhr.send(); 复制代码

己的服务器上，用于非法用途，比如冒充被害者登入中文网站A、窃取帐户资金等。

所以布吕马出访假如能打破相混思路，会给个人隐私和财产安全可靠带来极大的威胁。为了保护采用者的安全可靠，应用程序管制了布吕马出访。

如何优雅的处置

每当他们遇到这个难题时，最快的解决方法就是喊后端加一下enable cors，那有没有前端能他们想办法解决的呢？

有以下三种常用的方式:

JSONP代理的方式Webpack devserver

JSONP

大白话，JSONP是一种利用script标签的GET允诺实现布吕马的技术。 JSONP三个单纯的案例:

在B中文网站的

B中文网站后端返回数据的代码如下：

var data = { “name”: “Alice”, “age”: 18 }; var callback = req.query.callback; res.send(callback + ( + JSON.stringify(data) + )); // 将数据封装在回调函数中返回复制代码

A中文网站前端允诺代码如下:

function handleResponse(data) { console.log(data); } var script = document.createElement(script); script.src = http://www.domain2.com/getData?callback=handleResponse; document.head.appendChild(script); 复制代码

JSONP的优点是能实现布吕马允诺，而且兼容性好，几乎所有应用程序都支持。但是它也有一些弊端：

只支持GET允诺。因为JSONP是透过动态创建script标签来实现布吕马允诺的，而script标签只支持GET允诺。数据格式管制。JSONP只能返回JSON格式的数据，无法返回XML格式的数据。

代理的方式

大白话，就是他们搭三个本地服务器，通过出访服务器与服务器的关系，跨过应用程序这的相混思路。

我以Nest.js他们搭建三个单纯的代理：

import { Controller, Post, Req, Res, Body } from @nestjs/common; import { HttpService } from @nestjs/axios; import { Request, Response } from express; import{ Observable }from rxjs; import { map } from rxjs/operators; @Controller() export class AppController { constructor(private readonly httpService: HttpService) {} @Post(/api) proxy( @Req() request: Request, @Res() response: Response,@Body() data: any, ): Observable<any> { const url = request.query.url as string; constheaders = {Content-Type: application/x-www-form-urlencoded }; return this.httpService.post(url, data, { headers }).pipe( map((res) => { response.send(res.data); }), ); } } 复制代码

在上述功时，透过 response.send() 方法将响应数据返回给客户端。

原理如下图所示:

Webpack devserver

假如是大型项目，并且配置了webpack的话。

1.能在Webpack的配置文件中添加devServer.proxy属性来实现布吕马代理。具体实现方式如下：

// webpack.config.js module.exports = { // …devServer: { proxy: {/api: { target: http://www.domain2.com, //须要布吕马的url changeOrigin: true, pathRewrite: { ^/api: } } } } } 复制代码

在上面的代码中，/api会被转发到www.domain2.com

注意，假如在代理配置中设置了changeOrigin为true，则在代理允诺时会自动将允诺头中的Host字段设置为代理目标的搜索引擎，这样就能绕过应用程序的相混思路，实现布吕马允诺。

2.在应用中发起允诺时，将API允诺的路径设置为代理地址即可：

axios.get(/api/data) .then(response => { console.log(response.data) }) .catch(error => { console.log(error) }) 复制代码