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>
上面的头信息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预检请求,浏览器接收到服务器的预检请求响应信息后才会发起正式请求