跨域（Cross-Origin）问题概述与后端解决方案(CORS（跨域资源共享）、JSONP（JSON with Padding）、代理服务器)

一、什么是跨域

跨域（Cross-Origin）指的是在网页中，一个域名的网页尝试请求另一个域名下的资源。浏览器通过同源策略（Same-Origin Policy）阻止这种行为，以保护用户数据的安全性和隐私。具体来说，同源策略要求协议、域名和端口都相同才允许访问。

二、后端解决跨域的方案

1. CORS（跨域资源共享）
2. JSONP（JSON with Padding）
3. 代理服务器

1. CORS（跨域资源共享）

CORS 是一种标准化机制，通过设置 HTTP 头部来允许服务器指定哪些来源的请求是被允许的。主要涉及以下头部：

• Access-Control-Allow-Origin：指定允许哪些域名访问资源。
• Access-Control-Allow-Methods：指定允许的 HTTP 方法。
• Access-Control-Allow-Headers：指定允许的请求头。
• Access-Control-Allow-Credentials：指定是否允许发送 Cookie。

配置示例：

Java Spring Boot 示例：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

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

Node.js Express 示例：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
    origin: 'http://frontend-domain.com',
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: ['Content-Type'],
    credentials: true
}));

app.get('/api/data', (req, res) => {
    res.json({ key: 'value' });
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

2. JSONP（JSON with Padding）

JSONP 是一种旧的跨域解决方案，通过 <script> 标签加载数据。它只支持 GET 请求，但可以绕过浏览器的同源策略限制。

客户端代码：

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

服务器代码：

public void getData(HttpServletRequest request, HttpServletResponse response) throws IOException {
    String callback = request.getParameter("callback");
    String json = "{\"key\": \"value\"}";
    response.setContentType("application/javascript");
    response.getWriter().write(callback + "(" + json + ")");
}

3. 代理服务器

代理服务器通过将请求转发到 API 服务器，避免了直接的跨域请求问题。这种方式可以隐藏真实的 API 服务器地址，并处理复杂的请求逻辑。

Nginx 配置示例：

server {
    listen 80;

    location /api/ {
        proxy_pass http://api-server-domain.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location / {
        root /path/to/your/frontend;
        try_files $uri $uri/ =404;
    }
}

三、总结与比较

解决方案	优点	缺点	使用场景
CORS	标准化、灵活、支持多种 HTTP 方法	配置复杂，可能需要额外的安全设置	现代 Web 应用，支持复杂请求
JSONP	简单易用，快速实现跨域请求	仅支持 GET 请求，安全性较差	旧系统或只需支持 GET 请求的场景
代理服务器	不受浏览器同源策略限制，适用于所有 HTTP 方法	需要配置和维护额外的服务器，可能影响性能	内部系统、需要隐藏真实 API 服务器

四、开发补充与注意事项

1. 安全性：配置 CORS 时要谨慎，只允许可信的来源访问。避免设置 Access-Control-Allow-Origin 为 *，特别是在需要发送 Cookie 的情况下。
2. 性能：代理服务器可能会引入额外的延迟。合理配置负载均衡和缓存策略可以减少性能影响。
3. 兼容性：JSONP 仅支持 GET 请求，且不再是推荐的解决方案。应优先考虑 CORS 和代理服务器。
4. 调试与测试：在配置 CORS 和代理服务器时，要在开发和生产环境中进行充分测试，确保所有跨域请求正常工作。