ssm与vue交互中的问题

这周接了一个会议管理系统那里练手，也是本身负责的第一个项目，从需求分析，数据库的设计，到开始动手搭框架些项目，都是都对前面学习的一次整合。

后台在开发接口时，使用postman测试时，接口均可以正常完成功能，因此就放到了服务器上给前端测试。在测试时问题就出来了；

后台：ssm+shiro框架

前端：vue.js

问题描述：

该项目的登陆先由后台生成一验证码返回给前端，并保存在session中，不过当前端登陆时，后台会报 NullPointerException，看前端的请求头才发现前端的请求中并无携带cookie信息，并且会发生几回请求；

开始咱们觉得这就是经典的跨域问题，而后我就去了解了跨域

什么是跨域

浏览器从一个域名的网页去请求另外一个域名的资源时，域名、端口、协议任一不一样，都是跨域 

域名： 　

• 主域名不一样: http://www.baidu.com/index.html –>http://www.sina.com/test.js  
• 　子域名不一样: http://www.666.baidu.com/index.html –>http://www.555.baidu.com/test.js 　
• 域名和域名ip: http://www.baidu.com/index.html –>http://180.149.132.47/test.js 
• 端口：http://www.baidu.com:8080/index.http->http://www.baidu.com:8081/test.js 
•  协议：http://www.baidu.com:8080/index.html–> https://www.baidu.com:8080/test.js 

 备注： 　 

     1. 端口和协议的不一样，只能经过后台来解决 　

     2. localhost和127.0.0.1虽然都指向本机，但也属于跨域

为何会有跨域

由于浏览器的同源策略：

同源策略限制了从同一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

无论怎么样，咱们都是须要同源策略的，那么如何解决跨域了，先后端都有本身的解决方案，

解决跨域

先后端都有本身的解决方案，前端有jsonp专门用于解决跨域，无论只能使用get请求，很不方便；因此后端解决跨域会方便一些

CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。看名字就知道这是处理跨域问题的标准作法。CORS背后的基本思想是使用自定义的HTTP头部容许浏览器和服务器相互了解对方，从而决定请求或响应成功与否

Access-Control-Allow-Origin:指定受权访问的域Access-Control-Allow-Methods：受权请求的方法（GET, POST, PUT, DELETE，OPTIONS等)复制代码

在后台我经过spring mvc的拦截器去实现：

在spring-mvc-xml配置自定义拦截器

<mvc:interceptors>  
  <mvc:interceptor>      
  <mvc:mapping path="/**"/>      
  <bean class="com.cqupt.meeting.interceptor.ResponseInterceptor" />   
 </mvc:interceptor></mvc:interceptors>复制代码

后台配置完成后，问题仍然没有解决，我再次查看请求，发现每次请求都会有Options方式的请求，下面咱们看看这个options请求是怎么来的

CORS有两种请求，简单请求和非简单请求：

(1) 同时知足如下两大条件，就属于简单请求:

• 请求方法知足一下之一

1. head

2. get

3. post

•  HTTP的头信息不超出如下几种字段：

1. Accept

2. Accept-Language

3. Content-Language

4. Last-Event-ID

5.  Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

(2)非简单请求

非简单请求会发出一次预检测请求，返回码是204，预检测经过才会真正发出请求，这才返回200。

在 CORS 中，可使用 OPTIONS 方法发起一个预检请求，以检测实际请求是否能够被服务器所接受。预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法； Access-Control-Request-Headers 首部字段告知服务器实际请求所携带的自定义首部字段。服务器基于从预检请求得到的信息来判断，是否接受接下来的实际请求。

他的做用是用于试探服务器的响应是否正确,便是否能接受真正的请求,若是在options请求以后获取到的响应是拒绝性质的,例如500等http状态,那么它就会中止第二次的真正请求的访问，应对这种跨域预检机制，后台能够经过设置Access-Control-Max-Age来控制浏览器在多长时间内（单位s）无需在请求时发送预检请求。

可是到这，前端的session仍是没有发送过来,这时我以为这可能不是跨域了，应该是前端配置问题，而后百度后知道，使用axios请求时默认并不会带上web浏览器的cookie，须要进行如下的设置：

// 网络请求框架
import axios from 'axios'
axios.defaults.withCredentials=true //让ajax携带cookie
Vue.prototype.$http = axios     // 这样设置就能够在组件内用 this.$http 使用axios了
axios.defaults.baseURL = '' //初始化基础地址复制代码

加上后，终于把session传给后台了，完成了登陆；

总结：

在与前端及交互过程当中，问题确定是不少的，就好比这个跨域问题，都认为是对方的的问题，可是在一步步的解决过程当中，问题实际上是双方的，因此在交互时，面对问题不能相互甩锅，而是要学会质疑，不但要质疑别人，更重要的是质疑本身。