前后端分离前端访问后端报 403

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 1764 天前的主题，其中的信息可能已经有所发展或是发生改变。

前端 ajax:

$.ajax({
            url:"http://127.0.0.1:8080/blog/type/5",
            dataType:"JSON",
            type: "GET",
            contentType:'application/json;charset=UTF-8',
            crossDomain: true,
            success: function (result) {}
       }）

后端 CROS 配置:

@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("X-Requested-With,content-type,token");
        corsConfiguration.addAllowedMethod("GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
        corsConfiguration.setMaxAge(3600L);         // 预检请求的有效期，单位为秒。
        corsConfiguration.setAllowCredentials(true);// 是否支持安全证书(必需参数)

        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}


请求网址:http://127.0.0.1:8080/blog/type/5
请求方法:OPTIONS
远程地址:127.0.0.1:8080
状态码:
403
版本:HTTP/1.1
Referrer 政策:no-referrer-when-downgrade

请求头：

Host: 127.0.0.1:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: */*
Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: GET
Access-Control-Request-Headers: content-type
Referer: http://localhost:63343/MyBlog/index.html?_ijt=hbbpnj3pufuv05obggpj706936
Origin: http://localhost:63343
Connection: keep-alive
Cache-Control: max-age=0

响应头:

HTTP/1.1 403 
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Transfer-Encoding: chunked
Date: Sat, 29 Feb 2020 02:18:33 GMT
Keep-Alive: timeout=60
Connection: keep-alive

http://127.0.0.1:8080/blog/type/5 网站可以正常访问

之前有个项目相同配置可以运行求解

18 条回复 • 2020-02-29 15:44:15 +08:00

npe

2020-02-29 10:29:12 +08:00 via iPhone

跨域问题

ChunkitAu

2020-02-29 10:31:43 +08:00

我知道是跨域问题问题是我不知道怎么处理小白希望大佬给点提示后端试过 addAllowedHeader addAllowedMethod 设置* 都不行

wunonglin

2020-02-29 10:40:03 +08:00

1、Origin 最好设置固定 host
2、OPTIONS 单独处理，返回 200 或者 201，不然预检过不了

Yumwey

2020-02-29 10:52:20 +08:00

proxy

6IbA2bj5ip3tK49j

2020-02-29 10:52:45 +08:00 via iPhone

用了 spring security 吗？

ChunkitAu

2020-02-29 10:55:44 +08:00 via Android

@xgfan 没有

ChunkitAu

2020-02-29 10:56:15 +08:00 via Android

@wunonglin origin 固定为请求的地址都不行

wunonglin

2020-02-29 10:57:08 +08:00

@ChunkitAu #7 OPTIONS 单独处理了吗

gwy15

2020-02-29 10:59:46 +08:00

反正要挂到 nginx 后面，不如直接把 CORS 放到 nginx 上做；开发机也搭个 nginx 完事儿

ChunkitAu

2020-02-29 11:05:46 +08:00

@wunonglin

@Component
public class CORSInterceptor extends HandlerInterceptorAdapter {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws
Exception {

if("OPTIONS".equals(request.getMethod())) {
response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
response.addHeader("Access-Control-Allow-Headers", "Accept, Origin, XRequestedWith, Content-Type,
LastModified, token");
return false;
}
return true;
}
}
不行

CodeJr

2020-02-29 11:11:23 +08:00

这是我的跨域配置的方案：

、、、

@Bean
public CorsFilter corsFilter() {
//1.添加 CORS 配置信息
CorsConfiguration config = new CorsConfiguration();
//放行哪些原始域
config.addAllowedOrigin("*");
//是否发送 Cookie 信息
config.setAllowCredentials(true);
//放行哪些原始域(请求方式)
config.addAllowedMethod("*");
//放行哪些原始域(头部信息)
config.addAllowedHeader("*");
//暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
config.addExposedHeader("Content-Type");
config.addExposedHeader("X-Requested-With");
config.addExposedHeader("accept");
config.addExposedHeader("Origin");
config.addExposedHeader("Access-Control-Request-Method");
config.addExposedHeader("Access-Control-Request-Headers");
config.addExposedHeader(Constants.USER_TOKEN_STRING);

//2.添加映射路径
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);

//3.返回新的 CorsFilter.
return new CorsFilter(configSource);
}
、、、

CodeJr

2020-02-29 11:12:44 +08:00

Constants.USER_TOKEN_STRING 是我 token 验证定义的允许通行的请求头

CodeJr

2020-02-29 11:14:54 +08:00

实在不行可以用 spring 的 @CrossOrigin 进行部分跨域

xrr2016

2020-02-29 11:16:22 +08:00

跨域请求带 cookie 后端请求 Origin 不能设置为通配符 * , 需要设置指定域名和端口

ChunkitAu

2020-02-29 11:28:36 +08:00

@xrr2016 设置过请求的地址了没用

xDaShen

2020-02-29 12:51:33 +08:00

我一般会加个网关，就不存在跨域的问题了

ChunkitAu

2020-02-29 13:13:03 +08:00

解决了全部配置没有问题
我分了两个主包 A 和 B
启动类放在 B 包下 SpringBootApplication 没加载我跨域配置类
放在 A 和 B 包同一层结构跨域成功

hantsy

2020-02-29 15:44:15 +08:00

Spring 为什么会配置这么麻烦，。。。不明白。

·registry.addMapping("/**")·一行代码就可以全局启用 Cors。

···java
@Configuration
@EnableWebMvc// Spring Boot 中删除掉这一行
public class WebConfig extends WebMvcConfigurerAdapter {

@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**");
}
}
···

前后端分离 前端访问后端 报 403

前后端分离前端访问后端报 403