欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于ajax跨域问题的三个原因分析

程序员文章站 2022-05-18 23:54:23
ajax 跨域 原因 浏览器限制 很多人认为,跨域问题时后台造成的,其实不然,真正造成跨域问题的原因是浏览器,浏览器出于安全的考虑,当发现你的请求是跨域的,浏览器会做一些安全...

ajax 跨域

原因

浏览器限制

很多人认为,跨域问题时后台造成的,其实不然,真正造成跨域问题的原因是浏览器,浏览器出于安全的考虑,当发现你的请求是跨域的,浏览器会做一些安全校验,当校验不成功时,就会报跨域错误,说白了就是浏览器多管闲事。

这个问题具体可以通过浏览器控制台中的network中查看,当发出一个ajax请求时,可以看到后台的响应是 200,说明后台是成功处理这个请求,但 console 中输出的是跨域错误,证实了跨域问题是浏览器主动抛出的跨域

第二个原因,就是你发出的请求不是你本域的,我们的请求中,不同的域名,协议,端口,任何一个不同,都会造成跨域问题XHR (XMLHttpRequest) 请求

第三个原因,也就是你发出的是 XMLHttpRequest 请求,也是最重要的原因,也就是说,如果你发出的不是 XMLHttpRequest请求,比如所一个image标签,一个script 标签,就算是跨域请求,但浏览器并不会抛出跨域错误。浏览器中请求方式有很多,但只有xhr请求才会存在跨域问题,所以,只有满足以上三个条件时,才会有跨域问题

总结 —-> 造成跨越的原因

1. 浏览器有跨域安全限制

2. 属于不同的域,端口,协议 ...任何一个

3. 发出的请求为 XMlHttpRequest 请求

解决思路

浏览器限制

如果浏览器不做跨域安全限制,那就自然不存在跨域问题了,我们可以通过配置浏览器参数,让浏览器不做校验,跨域问题自然就解决了。但这个方法作用不大,因为修改的是客户端,每个客户端都需要修改,意义不大

XHR

因为只有 xhr 请求才会有跨域问题,只要不发xhr,就算是跨域的,浏览器也不会做限制。基于这种思路,提出 jsonp 来解决跨域问题。jsonp通过动态创建一个 script 来发出一个跨域请求,来避免浏览器跨域限制

跨域

第三个就是跨域,为什么第三个说跨域呢,因为 jsonp类型的跨域方法无法满足现有的开发需求,比如说 jsonp只支持 get 请求,post 请求之类的都不支持,有很多弊端。所以解决跨域问题,重点在解决跨域问题上

具体细节有俩个思路:

1.被调用方跨域

被调用方修改代码,让被调用方支持跨域,也就是当 a域名调用 b 域名时,b 域名是被调用方,在 b域名返回的字段中,基于 http协议 加上支持跨域的修改,告诉浏览器,我 b 域名允许a 域名调用,只要浏览器通过校验,那么跨域问题自然解决了。也就是支持跨域

2.调用方跨域

调用方跨域,也叫隐藏跨域,我们通过代理,让从 a 域名发出的请求,代理成 b 域名,在浏览器看来,发出的请求都是从 b域名发向 b 域名的请求,自然也不会有跨域限制了

总结 —-> 解决跨域的方法

1. 解除浏览器跨域安全限制(意义不大)

2. 避免发出 xhr 请求,例如 jsonp (有很多限制)

3. 通过解决跨域问题来解决跨域,有两种方法,被调用方支持和代理