常见的跨域类型

在 Web 开发中，跨域（Cross-Origin）是一个常见的问题，当一个网页的文档、脚本、样式或其他内容试图访问不同源（域名、协议或端口）的资源时，就会发生跨域问题。了解常见的跨域场景有助于我们更好地理解跨域问题的本质。

以下是几个常见的跨域场景。

1. 协议不同

1.1. 不同协议之间的通信

另一个常见的跨域场景是不同协议之间的通信，比如使用 HTTP 协议的网页需要与使用 HTTPS 协议的资源进行数据交互。

// 示例代码
// 在使用HTTP协议的页面中请求使用HTTPS协议的资源
var img = new Image();
img.src = "https://example.com/image";

1.2. HTTP 和 HTTPS 之间的通信

常见的跨域场景还包括使用 HTTP 和 HTTPS 之间的通信，这种情况下由于安全性原因而被浏览器所阻止。

// 示例代码
// 使用HTTP协议的页面请求使用HTTPS协议的资源
var iframe = document.createElement("iframe");
iframe.src = "https://example.com/page";
document.body.appendChild(iframe);

2. 域名不同

2.1. 不同域名之间的通信

最常见的跨域场景是不同域名之间的通信，即完全不同的域名之间进行跨域请求。

// 示例代码
// 从example1.com向example2.com发送跨域请求
fetch("http://example2.com/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

2.2. 不同子域之间的通信

在 Web 开发中，通常会出现不同子域之间的通信需求，例如blog.example.com与api.example.com之间需要进行数据交互。

// 示例代码
// 在blog.example.com页面中请求api.example.com的数据
fetch("http://api.example.com/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

3. 端口不同

3.1. 不同端口之间的通信

跨域问题还可能出现在不同端口之间的通信情况，比如一个网页在localhost:3000上运行，试图与localhost:4000上的服务器进行交互。

// 示例代码
// 在localhost:3000页面中请求localhost:4000服务器的数据
fetch("http://localhost:4000/api/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

通过上述几个常见的跨域场景，我们可以更清楚地了解在实陷 Web 开发中可能遇到的跨域问题。熟悉不同场景下的具体情况有助于我们选择合适的跨域解决方案来解决跨域问题。