跨域问题及解决方案

一、介绍

在前后端分离项目中，跨域问题是一定会遇到的。跨域问题的出现，会导致css、js或者ajax对后端请求等资源无法访问的情况。

要想解决跨域问题，首先先得了解什么是跨域问题。

问题：什么是跨域

跨越问题是由于浏览器的同源策略，是浏览器强制要求的安全策略，所以想要了解跨域，首先得了解同源。

所谓同源是指，协议、域名、端口均一致，只要以上三者有一个不一致，就会引发跨域问题

前端页面 后端接口 是否跨域 原因
http://banmoon.cn/index.html http://banmoon.cn/user/get 否 皆一致
http://banmoon.cn/index.html https://banmoon.cn/user/get 是 协议不一致
http://banmoon.cn/index.html http://other.com/user/get 是 域名不一致
http://banmoon.cn/index.html http://banmoon.cn:8080/user/get 是 端口不一致
http://localhost/index.html http://127.0.0.1/user/get 是 域名和IP路径也会导致跨域
http://aaa.banmoon.cn/index.html http://bbb.banmoon.cn/user/get 是 二级域名不一致（cookie也不能访问）

二、解决跨域问题的方法

1、jsonp请求

不做详解，列出优缺点，主要使用cors通信

  • 优点：

    • 兼容性很好，能在许多低版本的浏览器上运行

  • 缺点：

    • 只支持get请求，而不支持post及其他请求
    • 在调用失败时不会返回各种http的状态码
    • 只支持跨域http请求，不能解决跨域访问资源修改的问题
    • 安全性，容易被注入

2、CORS通信

1）介绍

CORS 是一个 W3C 标准，全称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨域的服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能。

整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与普通的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨域，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感知。因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨域通信。

2）简单请求与非简单请求

CORS可分为两种请求，简单请求（simple-request）和非简单请求（no-so-simple-request）

  • 简单请求

    以下条件均满足的为简单请求，否则为非简单请求

    情况一：请求方式，为以下其中之一

    • get
    • post
    • head

    情况二：请求头，不能出现以下没有的

    • Accept

    • Accept-Language

    • Content-Language

    • Content-Type （需要注意额外的限制）

    • DPR

    • Downlink

    • Save-Data

    • Viewport-Width

    • Width

    情况三：Content-Type 的值仅限于下列三者之一

    • text/plain

    • multipart/form-data

    • application/x-www-form-urlencoded

    如果是简单请求，

  1. 浏览会在请求的头信息中添加Origin，请求直接到后端符文

  2. 后端服务根据请求头Origin（协议 + 域名 + 端口），判断本次请求是否允许跨域

  3. 后端设置Access-Control-Allow-Origin（* 或者 传入的Origin）响应头，表示同意本次请求跨域

  4. 浏览器识别是否有Access-Control-Allow-Origin，如果没有则抛出错误

  • 非简单请求当不满足简单请求的构成条件时，该请求就为非简单请求如果是非简单请求

  1. 浏览器会提前发送一个请求方式为options的预检请求

    Origin：同简单请求一样（协议 + 域名 + 端口）

    预检请求还包含两个特殊的请求头

    Access-Control-Request-Method：该字段是必须的，本次请求会用到哪些方法

    Access-Control-Request-Headers：本次请求额外携带的请求头，多个时用逗号分隔

  2. 服务器需要进行处理，并成功响应返回成功的状态码，并设置以下响应头

    Access-Control-Allow-Origin：可设置为*，也可设置为具体的请求地址（协议 + 域名 + 端口）

    Access-Control-Allow-Methods：必须，表示服务器所支持的所有请求方法，多个时用逗号分隔

    Access-Control-Allow-Headers：表示服务端所支持额外的请求头字段，多个时用逗号分隔

    Access-Control-Allow-Credentials：布尔值，代表服务端是否同意发送cookie

    Access-Control-Max-Age：本次预检请求的有效期（秒），在此期间浏览器不用再次发送预检请求

  3. 浏览器判断预检请求回来的响应头信息，判断本次是否允许跨域

  4. 允许跨域后，发送真正的请求，携带真实的数据进行传输请求

  5. 如果不允许，则控制台打印报错，不会发送真正的请求

注意：

  1. CORS默认不发送Cookie，想要发送cookie必须如下设置

    1. 服务端必须将Access-Control-Allow-Credentials响应头设置为true，表示服务端同意传输cookie

    2. 前端必须设置withCredentials，浏览器处理同意传输cookie

      1
      2
      3
      4
      5
      // 原生 xml 的设置方式
      var xhr = new XMLHttpRequest();
      xhr.withCredentials = true;
      // axios 设置方式
      axios.defaults.withCredentials = true;

    3. 服务端响应头Access-Control-Allow-Origin不能再设置为*，只能是具体的（协议 + 域名 + 端口），与Origin请求头保持一致

  2. 新版谷歌浏览器看不见options请求

    1. 在浏览器地址栏输入chrome://flags/#out-of-blink-cors
    2. 将其设置为disabled，然后重启浏览器

三、CORS服务端设置响应

1、SpringBoot简单设置，@CrossOrigin注解设置

对于没有发送cookie要求的，我们可以直接使用@CrossOrigin注解，加在控制类或者方法上

SpringBoot会自动将Access-Control-Allow-Origin的值设置为*

1
2
3
4
5
6
7
8
9
10
11
@CrossOrigin
@RestController
public class UserController {
    
    @CrossOrigin
    @PostMapper("/create")
	public ResultInfo create(@RequestBody User user){
        return null;
    }
    
}

2、SpringBoot简单设置，配置类实现WebMvcConfigurer接口设置

此方式可以指定某几个地址访问，比上一种灵活一点

1
2
3
4
5
6
7
8
9
10
11
12
13
@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    	registry.addMapping("/**")//设置允许跨域的路径
            .allowedOrigins("*")//设置允许跨域请求的域名
            .allowCredentials(true)//是否允许证书 不再默认开启
            .allowedMethods("GET", "POST", "PUT", "DELETE")//设置允许的方法
            .maxAge(6000);//跨域允许时间
    }
    
}

3、SpringBoot拦截器设置

此方法灵活程度最高，可以自行设置，允许cookie传输可通过此方法设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import org.apache.commons.lang.StringUtils;
import org.springframework.http.HttpMethod;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;

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

/**
* CORS的拦截器
*/
@Component
public class CorsInterceptor extends HandlerInterceptorAdapter {
	
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
	String origin = request.getHeader("Origin");
	response.setHeader("Access-Control-Allow-Headers", "Sso-Token,token");
        response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");
	if(StringUtils.isBlank(origin)){
	    response.setHeader("Access-Control-Allow-Origin", "*");
	}else{
	    response.setHeader("Access-Control-Allow-Origin", origin);
	}
	if (HttpMethod.OPTIONS.toString().equals(request.getMethod())) {
	    response.setStatus(HttpStatus.NO_CONTENT.value());
	    return true;
	}
	return true;
    }
	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* 注册使用拦截器
*/
@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {
    @Resource
    private CorsInterceptor corsInterceptor;
    
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(corsInterceptor).addPathPatterns("/**");
    }
    
}

4、使用Nginx设置响应头达到CORS对服务器的配置

ngx_http_headers_module是nginx编译时默认自带的模块，里面有add_header和expires等

使用该模块下的add_header可以完成添加头信息的操作

  • 语法：add_ header name value [always];

  • 作用：可以添加自定义的响应头信息

  • 作用域：可以在http、server、location、if in location中使用

  • 注意：

    • 当前作用域没有add_header，才会继承上一层设置的响应头。也就是说，add_header可以在最上层统一设置，然后个性化独立设置
    • Nginx 1. 7. 5后增加了always语法，即便后端接口发生500错误，设置的响应头也能生效

  • 简单使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    server {
        listen 80;
        listen 443 ssl;
        server_name banmoon.com;

        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,bird-idempotency';
        add_header 'Access-Control-Allow-Methods' 'GET,PUT,POST,DELETE,OPTIONS';
        add_header 'Access-Control-Allow-Credentials' 'true';
        
        location / {
            proxy_pass localhost:8080;
        }
    }

  • 需要传递cookie时

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    server {
        listen 80;
        listen 443 ssl;
        server_name banmoon.com;

        if ($request_method = 'OPTIONS'){
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,bird-idempotency';
            add_header 'Access-Control-Allow-Methods' 'GET,PUT,POST,DELETE,OPTIONS';
            add_header 'Access-Control-Allow-Credentials' 'true';
            return 204;
        }
        if ($request_method != 'OPTIONS'){
            add_header 'Access-Control-Allow-Origin' "$http_origin";
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,bird-idempotency';
            add_header 'Access-Control-Allow-Methods' 'GET,PUT,POST,DELETE,OPTIONS';
            add_header 'Access-Control-Allow-Credentials' 'true';
        }
        
        location / {
            proxy_pass localhost:8080;
        }
    }

四、最后

我是半月，祝你幸福！！！