深入理解：跨域

最新推荐文章于 2024-07-06 09:00:00 发布

极客点儿

最新推荐文章于 2024-07-06 09:00:00 发布

阅读量2.8k

点赞数

分类专栏：大前端文章标签：跨域前端同源策略

本文链接：https://blog.csdn.net/yilovexing/article/details/123236601

版权

大前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

跨域是指Web浏览器中的同源策略限制，不允许不同源的网页脚本互相访问数据。同源策略是为了保护用户信息安全，防止恶意网站窃取数据。解决跨域的常见方法包括JSONP（仅支持GET请求）、CORS（支持所有HTTP请求，需服务器配合）和Nginx反向代理。Nginx反向代理通过设置中转服务器转发请求，使得不同源的请求看似同源，从而规避跨域限制。

摘要由CSDN通过智能技术生成

什么是跨域

在 Web 浏览器中，允许某个网页脚本访问另一个网页的数据，但前提是这两个网页必须有相同的 URI、主机名和端口号，若两个网站不满足上述任意一个条件就无法访问另一个网页数据，即为跨域。

为什么会跨域

产生跨域的原因是因为同源策略的限制。

同源策略由 Netscape 公司在 1995 年引入浏览器中，目前所有浏览器都使用同源策略。

同源策略的目的是为了保证用户信息的安全，防止恶意的网站窃取数据。同源策略是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

与 http://www.main.com/index.html 属于同源或跨域：

URL	是否跨域	原因
http://www.main.com/other.html	否	同源（协议、域名、端口号相同）
http://www.test.com/other.html	是	域名不同（main/test）
http://www.main.com:8080/other.html	是	端口号不同（80/8080）
https://www.main.com/other.html	是	协议不同（http/https）
https://www.test.com:8080/other.html	是	协议、域名、端口号都不同

如何解决跨域

跨域有很多种解决方法，即可以通过前端解决也可以通过后端处理，最常用的方法有如下几个：

JSONP

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持 GET 请求。

核心思想：网页通过添加一个 <script> 元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

CORS

CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

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

CORS 整个通信过程都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此实现 CORS 通信的关键是服务器，只要服务器实现了CORS 接口就可以跨源通信。

JSONP 只支持 GET 请求，CORS 支持所有类型的 HTTP 请求。JSONP 的优势在于支持老式浏览器，以及可以向不支持 CORS 的网站请求数据。CORS 需要浏览器和服务器同时支持，目前所有浏览器都支持该功能，IE浏览器不能低于 IE10。

Nginx 反向代理

Nginx 实现原理类似于 Node 中间件代理，需要你搭建一个中转 nginx 服务器，用于转发请求。

使用 nginx 反向代理实现跨域，是最简单的跨域方式。只需要修改 nginx 的配置即可解决跨域问题，支持所有浏览器，支持 session，不需要修改任何代码，并且不会影响服务器性能。

我们只需要配置 nginx，在一个服务器上配置多个前缀来转发 http/https 请求到多个真实的服务器即可。这样，这个服务器上所有 url 都是相同的域名、协议和端口。因此，对于浏览器来说，这些 url 都是同源的，没有跨域限制。而实际上，这些 url 实际上由物理服务器提供服务。这些服务器内的 javascript 可以跨域调用所有这些服务器上的 url。