【坑】前后端分离开发中跨域问题以及前台不带cookie的问题

深碍√TFBOYSˉ_ 2022-03-26 07:54 294阅读 0赞

### 文章目录 ###

*   *  前言
     *  跨域问题
     *  cookie问题
     *  拦截器导致的跨域问题
     *  后记

--------------------

## 前言 ##

1.  场景一：
    
    前台哒哒哒的点击页面，发送请求，但是后台服务器总是没有回应，后台接口虽打了断点，但是根本进不到断点处；
    
    **前端**：**我请求发过去了，数据格式也是对的，你接口文档就是那样写的，我按照接口文档要求写的，你服务器怎么了，你接口写的对吗，巴拉巴拉。。。。**
    
    **后台**：**我接口文档写的很对欸，我这边postman测试可以的，我测试通过了才写的文档欸，你那边什么情况啊，你发送的请求对吗，巴拉巴拉。。。**
2.  场景二：
    
    前台登陆的时候，验证码一直校验不通过；
    
    **前端**：**我输入的验证码，就是图片中的验证码，为什么你后台一直校验不通过啊，怎么肥四啊，你后台接口写的对吗，逻辑判断的对吗，巴拉巴拉。。。。**
    
    **后台**：**肯定对啊，我这边我自己用postman已经测试通过了，你那边怎么搞的，我后台都获取不到你的 `session` 欸，巴拉巴拉。。。**

**那一天是我实习生涯的第28天，第一次接触前后端分离开发，我感觉好像，慢慢领悟到了前后端分离开发的真谛：或许大概可能也许是 *前后端甩锅开发*；**

--------------------

## 跨域问题 ##

场景一，就是典型的跨域问题，在前后端分离开发的时候，由于前后台代码不在一台服务器上了，前端页面服务器想要访问后台接口的时候，由于浏览器的 **`同源策略`**，会拒绝掉这些访问，导致后台根本收不到这些请求；

后台需要配置下；

博主使用的是`SSM`框架，因此在 `springMvc.xml` 中配置：

<mvc:cors>
            <mvc:mapping path="/**"/>
        </mvc:cors>

最简单粗暴的，来自任何源的请求都接收；

--------------------

## cookie问题 ##

跨域访问的时候，浏览器默认是不带`cookie`去的，这样导致每次后台都产生根据请求产生新的`session`，验证码值保存在各自的session里面，当然也就永远的检验不通过了！

前台在发送 `Ajax` 请求的时候，告诉浏览器允许跨域带 `cookie` ，写上如下；

xhrFields:{ withCredentials: true}

--------------------

## 拦截器导致的跨域问题 ##

上面的问题都解决以后，最后给系统加上拦截器。跨域问题又来了。

我们需要在拦截器里面放行 `options` 方法，此方法是浏览器发出来的探测方法，探测目标主机是否允许跨域，结果在探测的时候，被拦截器拦截了，送出去的侦察兵音信全无，浏览器就不会向目标主机发送请求了，发出一个 `cros` 跨域错误 ；

// 放行探测跨域的 options　方法
            if ("OPTIONS".toLowerCase().equals(httpServletRequest.getMethod().toLowerCase())){ 
                System.out.println(httpServletRequest.getMethod().toLowerCase());
                return true ;
            }

--------------------

## 后记 ##

多年以后，或许我说的最多的话就是：

1.  **我这边能用**
2.  **在我这是好使的**
3.  **postman测试可以通过**
4.  **你没清缓存吧**