怎么解决服务器跨域问题

发布时间：2021-11-15 15:55:04 作者：iii
来源：亿速云阅读：234

# 怎么解决服务器跨域问题

## 什么是跨域问题

跨域（Cross-Origin）是指浏览器出于安全考虑，限制网页脚本向不同源（协议、域名、端口任一不同）的服务器发起请求。这是浏览器的同源策略（Same-Origin Policy）导致的限制，主要目的是防止恶意网站窃取用户数据。

常见的跨域场景包括：
- 前端域名 `https://example.com` 请求后端 `https://api.example.com`
- 开发环境 `http://localhost:3000` 访问测试接口 `http://localhost:8080`
- HTTPS 页面请求 HTTP 接口

## 主流解决方案

### 1. CORS（跨域资源共享）

**最推荐的官方方案**，通过服务器设置响应头实现：

```http
Access-Control-Allow-Origin: https://yourdomain.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

具体实现方式： - Node.js 示例：

res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET,POST');

Spring Boot 示例：

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**").allowedOrigins("*");
        }
    };
}

2. 代理服务器方案

适用于无法修改后端服务的情况：

开发环境代理配置（以Vite为例）：

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://backend-server',
        changeOrigin: true
      }
    }
  }
}

Nginx反向代理配置：

location /api/ {
    proxy_pass http://backend-server/;
    proxy_set_header Host $host;
}

3. JSONP（仅限GET请求）

利用 <script> 标签不受同源策略限制的特性：

function handleResponse(data) {
    console.log(data);
}
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

4. WebSocket协议

WebSocket不受同源策略限制：

const socket = new WebSocket('wss://api.example.com');
socket.onmessage = (event) => {
    console.log(JSON.parse(event.data));
};

方案选型建议

方案	适用场景	优点	缺点
CORS	现代Web应用	标准化、安全	需服务端配合
代理	开发环境/无权限改后端	前端独立解决	生产环境需部署代理
JSONP	老旧系统兼容	支持老浏览器	仅GET、安全性低
WebSocket	实时通信场景	双向通信	协议改造成本高

注意事项

生产环境慎用 Access-Control-Allow-Origin: *，应指定具体域名
复杂请求（如Content-Type为application/json）会先发OPTIONS预检请求

携带Cookie时需要设置：


Access-Control-Allow-Credentials: true

且客户端需要配置：


fetch(url, { credentials: 'include' })

通过合理选择上述方案，可以系统性地解决前后端分离开发中的跨域问题。 “`