欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CORS跨域

程序员文章站 2022-07-10 10:19:40
...

##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>

CORS跨域
上面的头信息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>

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

相关标签: cors 跨域请求