【跨域问题】

跨域问题

官方概念:

复制代码
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

本质来说,是前端请求给到后端时候,请求头里面,有一个 Origin ,会带上 协议域名端口号等;后端接受到请求;如果没有在"返回头"里面放上"一些东西",返回的时候,浏览器根据"同源策略",就不会接受到返回;

注意:

shell 复制代码
Sec-Fetch-Site 头部有几个可能的值:
	same-origin: 请求源和目标是同一个站点
	same-site: 请求源和目标在同一个站点组(比如 sub1.example.com 和 sub2.example.com)
	cross-site: 跨站点请求
	none: 请求不是由网站发起的(比如用户直接在地址栏输入URL)

我们来看两个例子:

这张是微博的任意页面刷新出来的东西:

这一个请求就没有跨域啥的,

然后我们看一个 B站的例子:

其实涉及到两个概念:

Origin是发出方。Host是目的地:这里可以看上面请求里B站的Host

解决

后端,返回的头里加上一个允许标记:给放过;

代码仅供参考,实际要根据业务需求情况,还有一些其他配置,这里关注:config.addAllowedOrigin("http://localhost:3000");

java 复制代码
// 方案1:后端配置 CORS(跨域资源共享)
@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        
        // 生产环境应该明确指定允许的域名
        config.addAllowedOrigin("https://www.your-domain.com");
        // 如果有多个域名,可以分别添加
        config.addAllowedOrigin("https://admin.your-domain.com");
        
        // 明确指定允许的请求方法,而不是使用 "*"
        config.addAllowedMethod("GET");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("DELETE");
        
        // 明确指定允许的头部,而不是使用 "*"
        config.addAllowedHeader("Authorization");
        config.addAllowedHeader("Content-Type");
        
        // 是否允许发送Cookie
        config.setAllowCredentials(true);
        
        // 预检请求的有效期,单位为秒
        config.setMaxAge(3600L);
        
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/api/**", config);
        
        return new CorsFilter(source);
    }
}

从前端也可以处理,生产环境的话,可以在Nginx里面配置

shell 复制代码
server {
    listen 80;
    server_name example.com;

    # 前端静态文件
    location / {
        root /path/to/dist;
        try_files $uri $uri/ /index.html;
    }

    # 后端 API 代理
    location /api {
        # 跨域配置
        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';
        
        # 处理 OPTIONS 预检请求
        if ($request_method = 'OPTIONS') {
            return 204;
        }

        # 反向代理配置
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

时光海海,日常焦虑 🍀,加油

相关推荐
一只叫煤球的猫3 分钟前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim11 分钟前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim14 分钟前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心25 分钟前
vben 之 axios 封装
前端·javascript·学习
遗憾随她而去.40 分钟前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09011 小时前
浅析Web存储系统
前端
望获linux1 小时前
【实时Linux实战系列】CPU 隔离与屏蔽技术
java·linux·运维·服务器·操作系统·开源软件·嵌入式软件
JosieBook1 小时前
【Java编程动手学】使用IDEA创建第一个HelloJava程序
java·开发语言·intellij-idea
Thomas_YXQ1 小时前
Unity3D DOTS场景流式加载技术
java·开发语言·unity
summer夏1231 小时前
2025.07 做什么
java·android studio