记录初学前端开发遇到的跨域和cookie的问题

初学前端，目的也不是要掌握得多深入，只要能够把自己的一些小工具的操作界面做出来就行。结果一上来就遇到几个问题。
后端做好了，登录用的shiro，使用postman测试接口，一切正常，但登录页面做出来，chrom上一调试，就出问题了。
首先就是跨域的问题。
我就想问一下，只要前后端分离，是不是就一定跨域了？因为前端应用与后端服务即使是在一台服务器上部署，端口也不相同。
有一个办法说是用nginx代理解决，因为我没有使用nginx所以没有去了解，我猜的话，是不是前端后台在nginx上使用同一个端口，通过路径来分别转发，这样来解决的跨域？留待以后求证吧。
那还有个办法就是Cors拦截器了。根据网上的介绍，配置一个CorsConfig，解决了跨域的问题。
但是登录没有问题，登录后就又出问题了，还是跨域。
一分析，是shiro的拦截器比cors的拦截器先生效。那么解决方案还是网上查的，把cors拦截器的顺序放到第一位：

@Configuration
public class CorsConfig{
    private CorsConfiguration buildConfig(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addAllowedOriginPattern("*");
        corsConfiguration.addAllowedOrigin("http://localhost:63343");
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.setMaxAge(3600L);
        return corsConfiguration;
    }

    @Bean
    public FilterRegistrationBean filterRegistrationBean(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }
}

主要是bean.setOrder(0); 这一句。至于拦截器怎么生效的，就要以后研究一下springboot框架了。反正就是注入吧。

跨域的问题解决后，跟着就是登录后的请求，还是取不到登录信息。
跟postman上测试的报文一对比，发现就是浏览器在请求的时候，没有带cookie，没有jsessionid（这个后端在登录的时候是set-cookie给了的）。然后又是一通百度。
依次解决了以下问题：
前端：
1、AJAX发送请求的时候设置withCredentials=true
2、把服务的localhost改成127.0.0.1
后端：（都不确定是不是都是必须的）
都是在cors里面处理的：
1、setAllowCredentials(true);
2、addAllowedOrigin("http://localhost:63343"); // 这个其实可能没有必要，因为前端使用localhost也是带不出cookie的，要使用127.0.0.1，跟这个配置也不符合。

总之，现在是可以往后继续了。

最后

以上就是沉默绿茶为你收集整理的记录初学前端开发遇到的跨域和cookie的问题的全部内容，希望文章能够帮你解决记录初学前端开发遇到的跨域和cookie的问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。