前后端未分离前，前端界面和代码写在一起，维护成本高，开发效率低。当前后端分离后，就要考虑到接口跨域的问题。

首先，在这里先简要解释一下，什么是同源。

所谓同源是指，域名，协议，端口相同。

比如www.abc.com下的js脚本采用ajax去访问www.xyz.com下的resource资源，在xyz没有明确授权跨域的情况下，请求一定会失败。即使js脚本已经请求到数据，F12也可以看到响应的数据，但浏览器拒绝将数据塞入请求结果中，也拒绝显示在页面上。因为js脚本和resource资源分别属于两个不同的源——他们的域名不相同。

那么为什么浏览器要遵守同源策略？

浏览器遵守同源策略，是为了安全考虑。

如果不遵守同源策略，那么我的ajax可以随便调用任何人的后端隐私接口，我的脚本可以任意读取别人网站下的cookie。我把这些恶意脚本放在自己的网站上，只要你访问我的网站，浏览器就会执行我的脚本，我就可以拿到你的所有cookie数据。

我现在有www.abc.com和www.xyz.com，我就想让abc下的脚本访问xyz下的数据，那么我该怎么办？

——利用CORS（跨域资源共享）

CORS简介

CORS允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。它的通信过程，都是浏览器自动完成，不需要用户参与。

对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。

浏览器一旦发现请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

在进行跨域请求时，有时候浏览器发送一个请求，有时候发送两个请求，这是怎么回事？

浏览器将CORS请求分成两类：

  • 简单请求（simple request）
  • 非简单请求（not-so-simple request）。

浏览器发出CORS简单请求，只需要在头信息之中增加一个Origin字段，接着，直接发送该请求。

浏览器发出CORS非简单请求，会在正式通信之前，增加一次OPTIONS查询请求，称为"预检"请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

简单请求就是HEAD、GET、POST请求，并且HTTP的头信息不超出以下几种字段

  1. Accept
  2. Accept-Language
  3. Content-Language
  4. Last-Event-ID
  5. Content-Type

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

否则，就是非简单请求，需要发送一个OPTION预检请求，然后再发送真正的数据请求。

当我发送一个跨域请求时，服务器的响应头是怎样的？

跨域情况下，服务器的响应头有以下几种

Access-Control-Allow-Origin
该字段必填。它的值要么是请求时Origin字段的具体值，要么是一个*，表示接受任意域名的请求。
Access-Control-Allow-Methods
该字段必填。它的值是逗号分隔的一个具体的字符串或者*，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

Access-Control-Expose-Headers
该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。

Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值，表示是否允许发送Cookie.默认情况下，不发生Cookie，即：false。对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json，这个值只能设为true。如果服务器不要浏览器发送Cookie，删除该字段即可。

Access-Control-Max-Age
该字段可选，用来指定本次预检请求的有效期，单位为秒。在有效期间，不用发出另一条预检请求。

顺便提一下，如果在开发中，发现每次发起请求都是两条，一次OPTIONS，一次正常请求，注意是每次，那么就需要配置Access-Control-Max-Age，避免每次都发出预检请求。

当浏览器发送一个跨域请求时，我不需要改动前端的任何代码，还向往常一样发送请求。那么当跨域的情况下，服务端该怎么配置？

由上面的响应头，我们可以有这样的想法，只要我们每次给response设置好这些响应头信息，不就可以实现跨域了吗？

每次都需要，那么我们新增一个***，应用到所有请求上。

package com.yang.plm.handler;


import org.springframework.http.HttpMethod;
import org.springframework.http.HttpStatus;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class SecurityInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS");
        response.setHeader("Access-Control-Max-Age", "86400");
        response.setHeader("Access-Control-Allow-Headers", "*");

        // 如果是OPTIONS则直接返回无响应体的响应
        if (HttpMethod.OPTIONS.toString().equals(request.getMethod())) {
            response.setStatus(HttpStatus.NO_CONTENT.value());
            return false;
        }

        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {

    }

}

并在配置中应用该***

package com.yang.plm.config;


import com.yang.plm.handler.SecurityInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.web.servlet.config.annotation.*;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    //不拦截静态资源
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    }

    @Override
    // 这样在项目启动是就会默认访问resource下的static文件夹的index.html
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("forward:/index.html");
        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        //拦截所有请求，允许跨域
        registry.addInterceptor(new SecurityInterceptor()).addPathPatterns("/**");
    }

}

如果需要对每个接口配置不同的跨域控制，则需要利用@CrossOrigin注解，不过，这个就显得太细了，这里不作阐述了。

配置好跨域控制后，我们就可以在后端允许的任何域上实现跨域请求了。