同源策略(SOP)
浏览器处于安全考虑,只允许相同协议,相同域名,相同端口之间的进程才能发起Ajax请求。
不受影响的跨域标签
script、link、img
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需要前端withCredentials,CORS会获取当前域的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.js的http-proxy-middleware进行代理
使用WebSocket
H5新增PostMessage
postMessageH5新增的window的API.
注:
window的postMessage(data,url)用于解决跨域或iframe通信WebWorker中的postMessage()用于主线程和worker线程的通信
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>
本文深入解析了跨域问题及其解决方案,包括JSONP、CORS、Proxy反向代理、WebSocket、PostMessage等技术,探讨了如何在不同场景下有效解决跨域限制。
669

被折叠的 条评论
为什么被折叠?



