浅浅理解和解决跨域问题

一、什么是跨域？

跨域指的是浏览器在发起请求时，所请求的资源的域名、协议或端口与当前页面所在的域名、协议或端口不一致的情况。浏览器出于安全考虑，默认阻止来自不同源的资源共享。这个安全策略被称为“同源策略”（Same-Origin Policy）。

同源策略

同源策略要求，浏览器中加载的网页只能访问与其同一域（域名、协议、端口）下的资源。如果网页 A 来自 http://example.com，则它只能访问同样在 http://example.com 域下的资源，无法访问 http://api.example.com 或者 http://otherdomain.com的数据。否则就会产生跨域请求。

二、跨域的原理

跨域问题的根本原因是浏览器的同源策略，旨在防止恶意网站窃取用户数据或进行 CSRF（跨站请求伪造）攻击。浏览器通过同源策略限制了不同域之间的资源共享。

同源策略的限制：

  1. 协议不同：比如一个页面是 http://example.com，另一个页面是 https://example.com。
  2. 域名不同：比如 http://example.com 和 http://sub.example.com。
  3. 端口不同：比如 http://example.com:80 和 http://example.com:8080。

这三者中的任意一个不同，就会导致跨域问题。

三、常见的跨域场景

跨域问题主要发生在以下几种常见场景中：

  1. 前端与后端分离的 SPA 应用：
    在前后端分离的架构中，前端（如 Vue、React）和后端（如 Python FastApi、Java Spring）通常运行在不同的域下。前端请求后端 API 时就会遇到跨域问题。

  2. 第三方服务集成：
    在使用第三方服务（如支付平台、地图服务等）时，可能需要从浏览器端发起跨域请求以获取数据。

  3. 跨域资源共享（CORS）：
    当使用 CDN 或其他外部资源时，浏览器会对跨域请求进行限制。

四、解决跨域的常见方法

跨域问题虽然普遍，但有多种解决方案可以有效处理。以下是几种常见的解决方法。

1. JSONP（仅限GET请求）

JSONP 是一种通过 <script> 标签进行跨域请求的技术。由于 <script> 标签不受同源策略限制，可以加载来自不同域的数据。

  • 优点：

    • 简单、易于实现。
    • 支持跨域 GET 请求。

  • 缺点：

    • 只能发送 GET 请求。
    • 不够安全，容易受到 XSS 攻击。

JSONP 的实现通常通过服务器返回一个 JavaScript 函数并传递请求数据来实现。例如：

1
2
3
4
5
6
7
8
// 客户端请求
function handleResponse(data) {
    console.log(data);
}

let script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

2. CORS（跨域资源共享）

CORS（Cross-Origin Resource Sharing）是一种 W3C 标准，它通过在服务器端设置 HTTP 头信息来允许跨域请求。CORS 是目前最常用且推荐的跨域解决方案，特别是对于支持复杂 HTTP 请求（如 POST、PUT、DELETE）的场景。

  • 原理：

    • 当浏览器发起跨域请求时，浏览器会先发送一个“预检请求”（OPTIONS 请求）来询问服务器是否允许跨域操作。
    • 如果服务器允许，则会在响应头中返回相应的 CORS 配置。

  • CORS 配置：

    1. Access-Control-Allow-Origin：指定允许跨域的域名。
    2. Access-Control-Allow-Methods：指定允许的 HTTP 方法。
    3. Access-Control-Allow-Headers：指定允许的请求头。
    4. Access-Control-Allow-Credentials：指定是否允许带凭证的请求。

示例: Gin框架中允许跨域实现

2.1 安装 Gin 和 CORS 中间件

首先，确保你已经安装了 Gin 框架以及用于处理 CORS 的中间件包。可以通过以下命令安装：

1
2
go get -u github.com/gin-gonic/gin
go get -u github.com/rs/cors

2.2 编写跨域配置的代码

在 Gin 中处理 CORS 请求，通常使用 rs/cors 这个中间件，它能够很方便地配置允许的跨域策略。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
package main

import (
	"github.com/gin-gonic/gin"
	"github.com/rs/cors"
	"net/http"
)

func main() {
	// 创建一个新的 Gin 引擎
	r := gin.Default()

	// 设置 CORS 配置
	corsConfig := cors.New(cors.Options{
		AllowedOrigins: []string{"http://example.com", "http://another-origin.com"}, // 允许跨域的域名
		AllowedMethods: []string{"GET", "POST", "PUT", "DELETE"},                   // 允许的 HTTP 方法
		AllowedHeaders: []string{"Origin", "Content-Type", "Authorization"},         // 允许的请求头
		AllowCredentials: true,                                                    // 是否允许携带凭证（如 Cookie）
		MaxAge: 3600,                                                               // 缓存预检请求的时间
	})

	// 使用 CORS 中间件
	r.Use(corsConfig)

	// 设置一个简单的路由
	r.GET("/hello", func(c *gin.Context) {
		c.JSON(http.StatusOK, gin.H{
			"message": "Hello from Gin!",
		})
	})

	// 启动服务
	r.Run(":8080")
}

3. 代理服务器

代理服务器是通过设置一个中间层（如 Nginx）来转发请求，避免浏览器直接跨域请求。代理服务器作为客户端和目标服务器之间的桥梁，将请求转发给目标服务器并返回数据。

  • 优点：

    • 适用于跨域的 API 请求。
    • 可以避免浏览器的同源策略限制。

  • 缺点：

    • 需要额外的服务器支持。
    • 配置复杂度增加，特别是在生产环境中。

通过 Nginx 配置代理：

1
2
3
4
5
server {
  location /api/ {
    proxy_pass http://api.example.com/;
  }
}

4. WebSocket

WebSocket 是一种基于 TCP 的协议，允许建立一个持久的双向连接。由于 WebSocket 不受同源策略限制，可以在跨域的情况下进行双向通信。

  • 优点：

    • 实现全双工通信，适用于实时数据传输。
    • 无需担心跨域限制。

  • 缺点：

    • 对 WebSocket 服务器的支持需要额外配置。
    • 不适用于所有类型的请求，主要用于实时通信。

5. 使用 IFrame 和 PostMessage

在跨域的情况下，可以通过 iframe 嵌套和 postMessage API 实现跨域通信。主页面和 iframe
中的子页面可以通过 postMessage 进行安全的跨域数据传输。

  • 优点：

    • 适用于跨域的嵌入式页面或组件。

  • 缺点：

    • 需要协商双方的消息格式，增加复杂度。