CORS跨域的限制与解决

Posted 2021-10-08 龙杰

CORS跨域的限制与解决

对于跨域的理解

跨域行为是浏览器行为，一个跨域请求实际已经发送到服务端，服务端也返回了消息，然而浏览器在接收到返回信息的时候，发现该信息不是同源请求且没有允许跨域的限制，所以在解析消息的将该条消息屏蔽同时在控制台报错。

解决办法

前端解决办法

利用浏览器允许标签的 跨域这一特性，例如 JOSNP ，但是 JSONP 只能使用 get 方法请求数据，jsonp的原理与实现

后端解决办法

添加允许跨域的头 Access-Control-Allow-Origin

 \'Access-Control-Allow-Origin\':\'*\' //允许所有站点跨域请求，也可以设置成某一个具体站点

CORS预请求

在跨域请求中使用了非默认的 Methods、Content-Type、Headers 浏览器会首先发起一个OPTIONS方法的请求，来验证是否通过。

允许跨域请求的方法

浏览器默认允许跨域请求的方法只有 GET HEAD POST，需要添加更多方法则需要在服务端添加 Access-Control-Allow-Methods

 \'Access-Control-Allow-Methods\':\'DELETE, PUT \' //允许所有站点跨域请求，也可以设置成某一个具体站点

允许跨域请求的Content-Type

浏览器默认允许跨域请求的Content-Type 只有 text/plain multipart/form-data application/x-www-form-urlencoded

自定义请求头

如果在请求方法中添加了自定义请求头，如果服务端没有对相应的头进行 Access-Control-Allow-Heards 的设置，则客户端会报跨域的错误

 \'Access-Control-Allow-Heards\':\'X-Test-Cors\' //X-Test-Cors 为自定义的请求头

Access-Control-Max-Age 允许预请求的时间

\'Access-Control-Max-Age\':\'1000\'

在1000s内经过预请求的Methods、Content-Type、Headers不需要再重新预请求验证