React:快速上手(8)——前后端分离的跨域访问与会话保持

跨域访问

　　跨域是指从一个域名的网页去请求另一个域名的资源。比如从http://www.baidu.com/ 页面去请求http://www.google.com 的资源。跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域。

　　如下，域名相同的情况下，3000端口的应用无法直接访问8080端口的服务。

跨域资源共享CORS

　　它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS需要浏览器与服务器的双向支持。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

　　在简单的跨域Ajax请求中，会在头部信息中添加Origin参数用于表面这个请求来自哪里，如下

　　如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。

　　如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段，如下：

　　其中，几个重要的头信息如下：

Access-Control-Allow-Origin：该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
Access-Control-Allow-Credentials：该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

服务器端的处理

　　如上所述，CORS请求的关键是在后端，即将Origin添加到服务器的许可范围内。在SpringBoot应用中，我们可以编写一个拦截器，来实现：

@Component
public class CorsInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object o) throws Exception {
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, If-Modified-Since");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.addHeader("Access-Control-Allow-Credentials", "true");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("application/json");
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception {

    }
}

　　这里直接允许了所有源，在实际开发中，必须指定可信范围的源。

客户端处理

　　对于使用creat-react-app构建的项目，可以直接在package.json下配置，具体如下　　

{
  "name": "recommender",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://代理地址",
  "dependencies": {
    "antd": "^3.23.3",
   ...  
  },
}

会话保持

　　CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials为true。另一方面，开发者必须在AJAX请求中打开withCredentials属性。

　　在Axios中，可以简单设置如下：

import axios from 'axios'
//方法1
axios.defaults.withCredentials =true;

//方法2
let config = {headers: {'Content-Type': 'multipart-/form-data'},withCredentials: true};

axios.post("http://127.0.0.1:8080/get.do", null, config).then((response) => {alert(response.data)})

　　服务端的处理，我们已经在上述代码中实现了，即

response.addHeader("Access-Control-Allow-Credentials", "true");

　　至此，前后端分离项目即可完成跨域访问与会话保持！

参考链接

阮一峰：跨域资源共享 CORS 详解