JSONP、CORS、Domain、

postMessage、Nginx配置、.NetCore配置。

在Web应用中#xff0c;当一个网页的脚本试图去请求另一个域…

这篇文章主要介绍了跨域问题包括其定义、产生原因及各种解决方法。

原因是浏览器安全策略限制方法有

JSONP、CORS、Domain、

postMessage、Nginx配置、.NetCore配置。

在Web应用中当一个网页的脚本试图去请求另一个域名下的资源时就会遇到跨域问题。

跨域问题是由浏览器的同源策略所引起的。

换句话说后端返回给浏览器的数据会被浏览器的同源策略给拦截下来。

同源策略要求资源的协议、域名和端口号都必须相同才能确保数据的安全性。

如果不满足这个条件请求将被浏览器拒绝从而导致跨域问题的出现。

同源策略

路径https://192.168.31.45:8080/userhttps://192.168.31.45:8080/list

上面这个例子虽然它们的路径不一样但是协议号、域名、端口号都相同所以它们就是同源的

跨域问题主要是由于浏览器的安全策略限制引起的。

同源策略的目的是保护用户的隐私和数据安全防止恶意网站获取用户的敏感信息或进行未授权的操作。

通过限制跨域请求浏览器有效地减少了许多网络攻击的风险例如跨站脚本攻击XSS和跨站请求伪造CSRF。

JSONP

请求后会将数据包装在回调函数中返回给前端。

这样前端页面就可以获得跨域请求返回的数据。

前端处理数据

函数当服务端返回数据时会执行这个函数并传入返回的数据作为参数从而实现跨域数据的获取和处理。

前端代码

initial-scale1.0titleDocument/title

/head

document.createElement(script);//

script

http://localhost:3000?cbcallback//

script

添加到文档中document.body.appendChild(script);

浏览器自动请求

document.getElementById(btn);//

绑定点击事件btn.addEventListener(click,

{//

存在安全风险因为它是通过在前端动态加载脚本来获取数据可能会被用于注入恶意脚本导致安全漏洞。

只支持

GET

需要服务端返回数据时将其包裹在一个回调函数中因此需要服务端提供支持如果服务端不支持

JSONP

CORS是一种机制允许服务器在响应中携带一个特殊的标头以告知浏览器该服务器允许哪些源的网页访问其资源。

可以总结为一句话后端通过设置响应头来告诉浏览器不要拒绝接受后端的响应。

前端代码在用户点击按钮时通过发送跨域请求获取服务器返回的数据并将数据打印到浏览器的控制台

!DOCTYPE

initial-scale1.0titleDocument/title

/head

document.getElementById(btn);btn.addEventListener(click,

发送跨域请求到服务器.***n(res

http://localhost:3000。

在成功接收到服务器响应后使用

.***n

cros实现原理Access-Control-Allow-Origin:

data

cors}res.end(JSON.stringify(data))

返回数据给前端页面

Access-Control-Allow-Origin指定允许访问的域名。

*表示允许所有域名访问

而Access-Control-Allow-Origin:http://127.0.0.1:5500表示只允许特定域名访问。

Access-Control-Allow-Methods指定允许的HTTP方法。

Access-Control-Allow-Headers指定允许的自定义请求头。

Domain

来访问父级页面的属性或变量但需要确保父级页面已经加载完成并且两者的域名设置已生效。

Domain

child.example.com。

我们希望这两个页面能够进行跨域通信。

在父级页面

srchttp://child.example.com/child.html/iframescriptdocument.domain

example.com;var

window.parent.messageFromParent;console.log(Message

from

document.domain父子页面之间就可以进行跨域通信实现数据共享和交互。

postMessage

可以用于解决跨域通信的问题其原理是利用浏览器中同源策略的限制将不同域的内容加载到独立的

iframe

initial-scale1.0titleDocument/title

/head

srchttp://127.0.0.1:5500/postMessage/b.html

frameborder0

document.getElementById(iframe);iframe.onload

function()

发送数据iframe.contentWindow.postMessage(JSON.stringify(data),

监听来自

的消息window.addEventListener(message,

function(e)

{console.log(e.data);});/script

/body

initial-scale1.0titleDocument/title

/head

监听来自父页面的消息window.addEventListener(message,

function(e)

{console.log(JSON.parse(e.data));if

(e.data)

{window.parent.postMessage(我接受到,

2000);}});/script

进行跨域通信是一种相对安全的方法能够避免常见的跨站脚本攻击XSS。

灵活性

可以在不同域之间传递数据实现更丰富的交互体验如单点登录、共享数据等。

适用性广泛

Web

跨域通信涉及到多个文档之间的交互需要额外的处理和编码增加了开发的复杂度。

性能开销

iframe

进行跨域通信可能会引入额外的网络请求和资源加载对页面加载性能有一定影响。

兼容性

postMessage

这个配置允许任何域通过GET、POST和OPTIONS方法访问资源并且允许一些常见的头信息字段。

Access-Control-Max-Age

确保在实际部署时根据安全和需求情况将Access-Control-Allow-Origin设置为特定域而不是*表示允许所有域以减少跨站脚本攻击XSS的风险。

server

User-Agent,Keep-Alive,Content-Type;#

缓存时间add_header

Core中配置跨域非常简单。

你可以在Startup.cs文件中的ConfigureServices方法添加跨域服务并在Configure方法中配置跨域。

public

在ConfigureServices方法中添加跨域服务public

void

ConfigureServices(IServiceCollection

services){//

{options.AddPolicy(CorsPolicy,builder

builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());});}//

void

使用跨域策略app.UseCors(CorsPolicy);//

...}