跨域

本文深入解析了跨域问题及其解决方案,包括JSONP、CORS、Proxy反向代理、WebSocket、PostMessage等技术,探讨了如何在不同场景下有效解决跨域限制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

同源策略(SOP)

浏览器处于安全考虑,只允许相同协议,相同域名,相同端口之间的进程才能发起Ajax请求。

不受影响的跨域标签

scriptlinkimg

JSONP

填充式JSON
利用<script>没有同源策略的限制,通过<script>指向要访问的地址,并提供回调函数来接受通讯。

var script = document.createElement('script')
script.type = 'text/javascript'
script.src = "url/?/calback=handleCallback"
function handleCallback(res){
	// res
}

CORS

Cross-Origin-Resourse-Sharing
跨域资源共享

  • 普通的请求需要后端设置Access-Control-Allow-Origin,前端无需设置
  • 若携带cookie需要前端withCredentialsCORS会获取当前域的cookie而非当前页面。
  • 携带cookie的写法
//前端
var xhr = new XMLHttpRequest()
xhr.withCredentials = true
//后端
response.setHeader('Access-Control-Allow-Origin',"url")
response.setHeader('Access-Control-Allow-Credentials','true')

Proxy反向代理

思路:同源策略是浏览器的安全策略,而非HTTP。

  • 使用Nginx配置代理服务器作为跳板,反向代理domin2接口,可接受页面的cookie
  • 使用Node.jshttp-proxy-middleware进行代理

使用WebSocket

H5新增全双共通信

H5新增PostMessage

postMessageH5新增的window的API.
注:

window.postMessage(JSON.stringify(data),url)
window.addEventListener('message',function(e){
	//e
})

document.domain

仅限主域相同。子域不同
两个页面强行设置doucment.domain实现域名一致

//iframe1
<script>
	document.doamin = "domain"
</script>
//iframe2
<script>
	document.domain = "domaim"
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值