2025年前端跨域原理(前端跨域什么意思)

前端跨域原理(前端跨域什么意思)1 跨域是什么意思 首先一个 url 是由 协议 域名 端口 三部分组成 一般端口默认 80 如 https blog moonlet cn 80 当一个请求 url 的 三者之间的与当前页面 url 即为 例如 当前页面 url 被请求页面 url 是否跨域 原因 http www testlocation com http www testlocation com index

大家好,我是讯享网,很高兴认识大家。




1.跨域是什么意思?

首先一个url是由:协议、域名、端口 三部分组成。(一般端口默认80)
如:https://blog.moonlet.cn:80

当一个请求url的、、三者之间的与当前页面url即为。
例如:

当前页面url 被请求页面url 是否跨域 原因http://www.testlocation.com/ http://www.testlocation.com/index.html 否 同源(协议、域名、端口号相同)http://www.testlocation.com/ https://www.testlocation.com/index.html 跨域 协议不同(http/https)http://www.testlocation.com/ http://www.baidu.com/ 跨域 主域名不同(test/baidu)http://www.testlocation.com/ http://blog.testlocation.com/ 跨域 子域名不同(www/blog)http://www.testlocation.com:8080/ http://www.testlocation.com:7001/ 跨域 端口号不同(8080/7001)

————————————————

2.跨域产生原因?

出于浏览器的限制。

 

讯享网

非同源会出现的限制

讯享网

3.nginx反向代理解决跨域(前端常用)

 


讯享网

讯享网

浏览器可以访问a,而服务器之间不存在跨域问题,浏览器先访问a的服务器c,让c服务器作为代理去访问b服务器,拿到之后再返回数据给a。

例如:

 

4.CORS解决跨域(也就是添加响应头解决跨域)

浏览器先询问b,b允许a访问
access-control-allow-origin
access-control-max-age
PHP端修改header:
image.png

讯享网

它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

浏览器端:

目前,所有浏览器都支持该功能(IE10以下不行)。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。

服务端:

CORS通信与AJAX没有任何差别,因此你不需要改变以前的业务逻辑。只不过,浏览器会在请求中携带一些头信息,我们需要以此判断是否运行其跨域,然后在响应头中加入一些信息即可。这一般通过过滤器完成即可。

优势:

缺点:

会产生额外的请求

5.通过jsonp解决跨域(老方法)

通常为了减轻web服务器的负载,我们把js、css、图片等静态资源分离到另一台独立域名的服务器上,在html页面中再通过相应的标签从不同域名下加载静态资源,而被浏览器允许。

html中有的标签天然支持跨域,比如<script src=https://segmentfault.com/a/"http://www.baidu.com"></script>但是只支持get请求。


小讯
上一篇 2025-06-16 22:18
下一篇 2025-05-28 07:31

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/136633.html