跨域（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;
    }
}

三、总结与比较

四、开发补充与注意事项

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