课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
跨域问题是许多web前端编程开发程序员需要了解和掌握的一个编程技术,而今天我们就通过案例分析来了解一下,跨域问题应该如何解决。
简单的跨域请求
请求方法是GET、HEAD或者POST,并且当请求方法是POST时,Content-Type必须是application/x-www-form-urlencoded,multipart/form-data或着text/plain中的一个值。
请求中没有自定义HTTP头部。
浏览器要做的就是在HTTP请求中添加OriginHeader,将JavaScript脚本所在域填充进去,向其他域的服务器请求资源。服务器端收到一个简单跨域请求后,根据资源权限配置,在响应头中添加Access-Control-Allow-OriginHeader。浏览器收到响应后,查看Access-Control-Allow-OriginHeader,如果当前域已经得到授权,则将结果返回给JavaScript。否则浏览器忽略此次响应。
带预检(preflighted)的跨域请求
除GET、HEAD和POST以外的其他HTTP方法。
请求中出现自定义HTTP头部。
带预检(Preflighted)的跨域请求需要浏览器在发送真实HTTP请求之前先发送一个OPTIONS的预检请求,检测服务器端是否支持真实请求进行跨域资源访问,真实请求的信息在OPTIONS请求中通过Access-Control-Request-MethodHeader和Access-Control-Request-HeadersHeader描述,此外与简单跨域请求一样,浏览器也会添加OriginHeader。服务器端接到预检请求后,根据资源权限配置,在响应头中放入Access-Control-Allow-OriginHeader、Access-Control-Allow-Methods和Access-Control-Allow-HeadersHeader,分别表示允许跨域资源请求的域、请求方法和请求头。此外,服务器端还可以加入Access-Control-Max-AgeHeader,允许浏览器在指定时间内,无需再发送预检请求进行协商,直接用本次协商结果即可。浏览器根据OPTIONS请求返回的结果来决定是否继续发送真实的请求进行跨域资源访问。这个过程对真实请求的调用者来说是透明的。
XMLHttpRequest支持通过withCredentials属性实现在跨域请求携带身份信息(Credential,例如Cookie或者HTTP认证信息)。浏览器将携带CookieHeader的请求发送到服务器端后,如果服务器没有响应Access-Control-Allow-CredentialsHeader,那么浏览器会忽略掉这次响应。
【免责声明】:本内容转载于网络,转载目的在于传递信息。文章内容为作者个人意见,本平台对文中陈述、观点保持中立,不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请在707945861群中学习了解。