跨域请求及解决方案

跨域请求

  跨域请求是指当前发起请求的域与该请求指向的资源所在的域不一样，只有当协议+域名+端口三者均相同时才认为是同域。例如，aaa.com 的网站发起一个URL为bbb.com/pay/purchase 的 Ajax 请求，该请求即为跨域请求；

存在问题

  跨域请求可能导致CSRF攻击，因此出于安全方面的考虑，浏览器通常会对跨域请求进行限制；

解决方案

方案1: JSONP（废弃）

  JSONP只支持GET请求，无法支持现在流行的RESTful风格；

方案2：代理（常用）

  使用Nginx或者Node.js等作为中间层进行请求的转发；

方案3：CORS（常用）

  CORS 全称为 Cross Origin Resource Sharing（跨域资源共享），W3C的一个标准，支持标准的浏览器可以向声明CORS的跨域服务器发送请求，大致分为两步：

1. 当浏览器发现为跨域请求时，首先以 OPTIONS 请求方式发送一个预请求（浏览器自动添加CROS头部），从而获知服务器端对跨源请求所支持 HTTP 方法；
2. 在确认服务器允许该跨源请求的情况下，以实际的 HTTP 请求方法发送那个真正的请求，共享资源的服务器接收到请求后，进行校验及处理，然后响应头中添加CORS相关头部返回；

CORS头部字段

  这些头部实际就是共享资源服务器声明的白名单，允许特定域名的特定动作的请求访问资源，详见博文

浏览器支持情况

服务端配置@CORS

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://domain2.com")
                .allowedMethods("PUT", "DELETE")
                .allowedHeaders("header1", "header2", "header3")
                .exposedHeaders("header1", "header2")
                .allowCredentials(false).maxAge(3600);
    }
}

参考：

1. http://blog.720ui.com/2016/web_cross_domain/
2. 解释：https://www.jianshu.com/p/f880878c1398
3. 服务端声明方式：https://www.jianshu.com/p/9203e9b14465