当前位置：首页 > article >正文

解决跨域问题方案

article 2025/1/22 21:07:38

跨域问题在前后端分离架构下尤为常见，是每个 Web 开发者都会遇到的核心问题。本文将通过原理解析、场景剖析、解决方案详解以及最佳实践等多个维度，帮助开发者全面理解并有效应对跨域问题。

- - **一、跨域的本质**
  - - **1. 同源策略**
    - **2. 同源策略的限制范围**
    - **3. 为什么需要同源策略**
  - **二、跨域问题的常见场景**
  - - **1. 前后端分离**
    - **2. 第三方服务调用**
    - **3. 静态资源加载**
    - **4. 跨协议请求**
  - **三、跨域的解决方案详解**
  - - **1. CORS（跨域资源共享）**
    - - **CORS 在 Spring Boot 中的配置**
    - **2. 代理服务器转发**
    - **3. JSONP（仅支持 GET 请求）**
    - **4. iframe + postMessage**
    - **5. 后端设置 JSONP API**
  - **四、最佳实践**
  - **五、总结**

一、跨域的本质

1. 同源策略

跨域问题的根本源于浏览器的同源策略（Same-Origin Policy）。同源策略是浏览器的一种安全机制，用于限制不同源的文档或脚本如何彼此交互，以保护用户的数据安全。

同源的定义：协议、域名、端口号必须一致。

属性示例 1 示例 2 是否同源
协议 http://example.com https://example.com 否
域名 http://example.com http://api.example.com 否
端口号 http://example.com:80 http://example.com:8080 否

属性	示例 1	示例 2	是否同源
协议	`http://example.com`	`https://example.com`	否
域名	`http://example.com`	`http://api.example.com`	否
端口号	`http://example.com:80`	`http://example.com:8080`	否

2. 同源策略的限制范围

同源策略主要限制以下行为：

Cookie、LocalStorage 和 SessionStorage 的读取
DOM 和 JavaScript 对象的访问
AJAX 请求（尤其是跨域数据的访问）

3. 为什么需要同源策略

同源策略主要是为了防止以下安全风险：

跨站脚本攻击（XSS）：恶意页面通过脚本窃取用户数据。
跨站请求伪造（CSRF）：利用用户身份对目标网站执行未授权操作。
数据劫持：防止不受信任的域窃取敏感信息。

二、跨域问题的常见场景

1. 前后端分离

现代 Web 应用通常采用前后端分离架构，前端通过 AJAX 请求与后端进行交互。当前端和后端运行在不同的域时，会触发跨域问题。例如：

前端：http://localhost:3000
后端：http://localhost:8080

2. 第三方服务调用

前端需要请求第三方 API，例如调用 https://api.example.com 提供的开放服务，这种场景也会引发跨域问题。

3. 静态资源加载

页面运行在 http://example.com，而静态资源托管在 CDN（如 https://cdn.example.com）上。

4. 跨协议请求

例如从 HTTP 页面调用 HTTPS 服务。

三、跨域的解决方案详解

1. CORS（跨域资源共享）

CORS 是 W3C 提出的标准解决方案，允许服务端通过设置特定的响应头，告知浏览器允许跨域访问。

CORS 的关键响应头：
- Access-Control-Allow-Origin：允许的源（如 http://example.com，或 * 代表允许所有源）。
- Access-Control-Allow-Methods：允许的 HTTP 方法（如 GET, POST）。
- Access-Control-Allow-Headers：允许的自定义请求头（如 Authorization）。
- Access-Control-Allow-Credentials：是否允许携带凭证（如 Cookie）。
- Access-Control-Max-Age：预检请求的缓存时间。

CORS 在 Spring Boot 中的配置

Spring Boot 提供了多种方式支持 CORS：

全局配置
使用 WebMvcConfigurer 添加全局的 CORS 配置。

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://example.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

局部配置
在控制器类或方法上使用 @CrossOrigin 注解。

@RestController
@RequestMapping("/api")
public class MyController {

    @CrossOrigin(origins = "http://example.com")
    @GetMapping("/data")
    public ResponseEntity<String> getData() {
        return ResponseEntity.ok("Hello, World!");
    }
}

通过过滤器统一配置
使用 OncePerRequestFilter 创建全局 CORS 过滤器。

@Component
public class CORSFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
            throws ServletException, IOException {
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        filterChain.doFilter(request, response);
    }
}

2. 代理服务器转发

通过代理服务器将跨域请求转发为同源请求，避免跨域问题。

开发环境中的前端代理

React 配置代理：

{
    "proxy": "http://localhost:8080"
}

Vue 配置代理：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                changeOrigin: true,
                pathRewrite: { '^/api': '' }
            }
        }
    }
};

Nginx 反向代理

server {
    listen 80;
    server_name example.com;

    location /api/ {
        proxy_pass http://backend-service:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

3. JSONP（仅支持 GET 请求）

通过 <script> 标签加载远程数据，并利用回调函数实现跨域通信。

前端调用示例：

<script>
    function handleResponse(data) {
        console.log(data);
    }
</script>
<script src="http://example.com/api?callback=handleResponse"></script>

后端返回数据：

handleResponse({"message": "success"});

4. iframe + postMessage

通过嵌入跨域的 iframe，并使用 postMessage 方法实现通信。

父页面代码：

const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('hello', 'http://example.com');

window.addEventListener('message', (event) => {
    if (event.origin === 'http://example.com') {
        console.log(event.data);
    }
});