后端代码支持跨域+Nginx缓存 前端调用跨域

zgw06629 发布于 04/07 10:53
阅读 653
收藏 0

开源之夏第三届火热来袭,高校学生参与赢万元奖金!>>>

一个接口 已经在后端代码上支持了跨域请求

    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }

由于访问量大 同时在Nginx层加了缓存


    location /api/articleTopics {
        proxy_pass http://127.0.0.1:8027/api/articleTopics;
        add_header  Nginx-Cache "$upstream_cache_status";
        proxy_cache cache1; #设置资源缓存的zone
        proxy_cache_key $host$uri$is_args$args;
        proxy_cache_valid 200 304 10m;  #对不同的HTTP状态码设置不同的缓存时间
        proxy_cache_lock on;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

之前都是App端直接调用  没有什么问题

最近 H5也来调用 发现了这么一个奇怪的问题  

如果App端先访问的 已经缓存了  此时H5来访问的话 就跨域

如果H5先访问的 就正常

不知道什么原因 ? 如和解决 目前解决的方案是复制了一份location 给H5调用 两个端的缓存也独立

 

加载中
0
easytzb
easytzb

因为APP先访问,nginx会缓存,此时缓存数据中的响应头信息没有允许跨域的头信息,H5再跨哉访问时,不会走后端,直接取缓存,然面缓存中没有允许跨域的头信息,报错

easytzb
easytzb
回复 @incess : APP没有跨域一说,所以APP请求头中没有Origin字段。你再按我说的思路理一下,如果你说的对,那我说的就更没问题了
incess
incess
回复 @easytzb : 你这有点就说不到点上了,不论APP还是H5都存在跨域请求,APP没有跨域报错,是因为APP没有浏览器拦截。H5跨域错误是因为浏览器的安全策略。
easytzb
easytzb
回复 @zgw06629 : 先确认下,是不是如下情况:APP 端访问不是跨域请求,H5请求是跨域请求(即H5请求头中带Origin头,APP请求中不带Origin头)。如果是,上面我猜测就是正确的 为什么H5先访问,就正常,因为H5访问是跨域请求,第一次访问时响应头信息带有允许跨域的头,而且被缓存, 第二个访问是APP请求时,即便不是跨域请求也会带上上一次请求后缓存下来的头,所有正常
zgw06629
zgw06629
那为什么H5先访问的 就正常呢 此时Nginx也会缓存啊
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部