CORS跨域

CORS跨域问题

简介：

cors（cross-origin resource sharing）跨域资源共享，一个请求url的协议,域名,端口三者之间任意与当前页面地址不同即为跨域。浏览器默认的安全限制为同源策略，即JavaScript或Cookie只能访问同源（相同协议，相同域名，相同端口）下的内容。但由于跨域访问资源需要，出现了CORS机制，这种机制让web服务器能跨站访问控制，使跨站数据传输更安全。CORS需要浏览器和服务器同时支持，目前，主流的浏览器都支持cors。

cors简单请求

• 请求方式：GET、POST、HEAD（HEAD请求和GET本质是一样的，但是HEAD请求不含数据，只有HTTP头部信息）
• HTTP头部信息不超过一下几种字段：无自定义头部字段、Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type（只有三个值application/x-www-form-urlencoded、multipart/form-data、text/plain）

在http://localhost:8081/index html中进行简单跨域请求。

<script>
    var HTTP = new XMLHttpRequest();
    HTTP.open("GET", "http://localhost:8083/getCookie");
    HTTP.send()
    HTTP.onreadystatechange = function (ev) {
        if (this.readyState == 4 && this.status == 200) {
            console.log(HTTP.responseText)
        }
    }
</script>

上面的头信息Origin字段用来说明本次请求来自哪个源(协议+域名+端口)。服务器根据这个值，决定是否同意这次请求。如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应，浏览器收到这个回应发现这个回应的头信息没有包含Access-Control-Allow-Origin字段，会抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意这种错误无法通过状态码识别，此时HTTP回应的状态码可能是200

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8081")
                .allowCredentials(true);
    }
}

在http://localhost:8083 springboot服务中添加WebConfig 配置，设置允许http://localhost:8081源的跨域访问，则可以正常请求到数据

cors非简单请求

• 请求方式：PUT、DELETE
• 自定义头部字段
  在http://localhost:8081/index html中进行非简单跨域请求。
  （服务器端不设置允许请求头则是默认允许所有自定义请求头）

<script>
    var HTTP = new XMLHttpRequest();
    HTTP.open("get", "http://localhost:8083/getCookie");
    HTTP.setRequestHeader("X-Custom_header","custom");
    HTTP.send()
    HTTP.onreadystatechange = function (ev) {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("hh").innerHTML=HTTP.responseText;
        }
    }
</script>

上面的非简单请求，在正式请求前会发送OPTION预检请求，浏览器接收到服务器的预检请求响应信息后才会发起正式请求