前端跨域原理（前端跨域什么意思）

前端开发来源：网络编辑：小编更新时间：2026-02-02 16:36:09 浏览量：22

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解决跨域(也就是添加响应头解决跨域)

它允许浏览器向跨源服务器，发出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请求。

到此这篇前端跨域原理（前端跨域什么意思）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇：前端埋点插件（前端埋点插件webtracing）

下一篇：前端跨域方式（前端跨域原理）

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/31304.html

相关文章：