V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ChunkitAu
V2EX  ›  程序员

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

  •  
  •   ChunkitAu · 2020-02-29 10:24:52 +08:00 · 4469 次点击
    这是一个创建于 1490 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前端 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
        1
    npe  
       2020-02-29 10:29:12 +08:00 via iPhone
    跨域问题
    ChunkitAu
        2
    ChunkitAu  
    OP
       2020-02-29 10:31:43 +08:00
    我知道是跨域问题 问题是我不知道怎么处理 小白 希望大佬给点提示 后端 试过 addAllowedHeader addAllowedMethod 设置* 都不行
    wunonglin
        3
    wunonglin  
       2020-02-29 10:40:03 +08:00
    1、Origin 最好设置固定 host
    2、OPTIONS 单独处理,返回 200 或者 201,不然预检过不了
    Yumwey
        4
    Yumwey  
       2020-02-29 10:52:20 +08:00
    proxy
    xgfan
        5
    xgfan  
       2020-02-29 10:52:45 +08:00 via iPhone
    用了 spring security 吗?
    ChunkitAu
        6
    ChunkitAu  
    OP
       2020-02-29 10:55:44 +08:00 via Android
    @xgfan 没有
    ChunkitAu
        7
    ChunkitAu  
    OP
       2020-02-29 10:56:15 +08:00 via Android
    @wunonglin origin 固定为请求的地址 都不行
    wunonglin
        8
    wunonglin  
       2020-02-29 10:57:08 +08:00
    @ChunkitAu #7 OPTIONS 单独处理了吗
    gwy15
        9
    gwy15  
       2020-02-29 10:59:46 +08:00
    反正要挂到 nginx 后面,不如直接把 CORS 放到 nginx 上做;开发机也搭个 nginx 完事儿
    ChunkitAu
        10
    ChunkitAu  
    OP
       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
        11
    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
        12
    CodeJr  
       2020-02-29 11:12:44 +08:00
    Constants.USER_TOKEN_STRING 是我 token 验证定义的允许通行的请求头
    CodeJr
        13
    CodeJr  
       2020-02-29 11:14:54 +08:00
    实在不行 可以用 spring 的 @CrossOrigin 进行部分跨域
    xrr2016
        14
    xrr2016  
       2020-02-29 11:16:22 +08:00
    跨域请求带 cookie 后端请求 Origin 不能设置为通配符 * , 需要设置指定域名和端口
    ChunkitAu
        15
    ChunkitAu  
    OP
       2020-02-29 11:28:36 +08:00
    @xrr2016 设置过请求的地址了 没用
    xDaShen
        16
    xDaShen  
       2020-02-29 12:51:33 +08:00
    我一般会加个网关,就不存在跨域的问题了
    ChunkitAu
        17
    ChunkitAu  
    OP
       2020-02-29 13:13:03 +08:00
    解决了 全部配置没有问题
    我分了两个主包 A 和 B
    启动类放在 B 包下 SpringBootApplication 没加载我跨域配置类
    放在 A 和 B 包同一层结构 跨域成功
    hantsy
        18
    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("/**");
    }
    }
    ···
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2730 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 418ms · UTC 12:36 · PVG 20:36 · LAX 05:36 · JFK 08:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.