解决跨域请求(CORS)的方法

最新推荐文章于 2025-02-17 17:59:28 发布

@Navie

最新推荐文章于 2025-02-17 17:59:28 发布

阅读量411

点赞数 10

文章标签： java 前端服务器

本文链接：https://blog.youkuaiyun.com/hyymonet/article/details/145224319

版权

1、什么是跨域

跨域问题是指在浏览器中，当一个域下的网页尝试请求另一个域下的资源时，由于浏览器的同源策略限制，导致无法直接进行通信的问题。同源策略是浏览器的一项安全功能，要求两个页面必须具有相同的协议、域名和端口号才能进行交互。如果协议、域名或端口号有任何一个不同，就会发生跨域。

2、服务器端设置 CORS 响应头（最常用）

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  // 所有接口
            .allowedOrigins("*")    // 允许所有来源
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的方法
            .allowedHeaders("*")    // 允许所有请求头
            .allowCredentials(true) // 允许携带凭证
            .maxAge(3600);         // 预检请求的有效期
    }
}

3、使用代理服务器

// vue.config.js
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://target-server.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

4、 Nginx 反向代理配置

server {
    listen 80;
    server_name your-domain.com;

    location /api/ {
        proxy_pass http://target-server.com/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        
        # CORS 配置
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}