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

2020-02-29 10:24:52 +08:00
 ChunkitAu

前端 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 网站可以正常访问

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

4717 次点击
所在节点    程序员
18 条回复
npe
2020-02-29 10:29:12 +08:00
跨域问题
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
用了 spring security 吗?
ChunkitAu
2020-02-29 10:55:44 +08:00
@xgfan 没有
ChunkitAu
2020-02-29 10:56:15 +08:00
@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("/**");
}
}
···

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/648525

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX