简单理解跨域

目录

一、什么是跨域(Cross-Origin)

二、为什么会出现跨域问题

三、解决跨域

---

一、什么是跨域(Cross-Origin)

• 指的是在Web开发中，当一个网页从不同源（Origin）加载资源或尝试与另一个源上的服务器进行交互时的情况

• 这里的“源”由三个部分组成：协议（http, https, file, etc.）、域名和端口号。如果这三个部分中有任何一个不同，就被认为是不同的源。

• 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

当前页面url	被请求页面url	是否跨域	原因
http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	跨域	协议不同（http/https）
http://www.test.com/	百度一下，你就知道	跨域	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	跨域	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	跨域	端口号不同（8080/7001）

二、为什么会出现跨域问题

浏览器-----同源策略限制。

• 同源策略（Same-origin policy）是浏览器为了保护用户数据安全而实施的一种安全措施。

• 它限制了来自不同源的脚本对资源的读写权限。

• 如果没有同源策略，一个网站上的恶意脚本可以轻易地读取和修改另一个网站的数据，从而导致浏览器的同源策略限制问题，如XSS（跨站脚本攻击）和CSRF（跨站请求伪造）等。

• 为了允许跨域请求，Web应用可以使用以下几种方法之一来解决跨域问题

三、解决跨域

只做初步介绍。

• CORS（跨源资源共享）：服务器通过响应头中的Access-Control-Allow-Origin字段来指定哪些源可以访问其资源。

• JSONP（JSON with Padding）：一种利用<script>标签不受同源策略限制的特性实现跨域的方法，适用于GET请求。

• 代理服务器：在服务器端设置代理，将跨域请求转发到目标服务器，避免直接从客户端发起跨域请求。

• PostMessage API：允许不同源的窗口对象之间进行安全的通信。

• WebSocket：WebSocket协议本身支持跨域连接，服务器可以通过设置适当的响应头来允许跨域连接。

• Server-Sent Events (SSE)：类似WebSocket，但仅用于服务器向客户端推送更新，也支持跨域。

• 使用document.domain：在特定情况下，如两个域共享相同的顶级域名，可以设置document.domain属性来绕过同源策略。