ajax 跨域,这是最全的解决方案(一)

阅读数:1 2020 年 1 月 9 日 15:56

ajax 跨域,这是最全的解决方案(一)

从刚接触前端开发起,“跨域”这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过 N 个跨域相关的问题了。

关于跨域,有 N 种类型,本文只专注于“ajax 请求跨域”( ajax 跨域只是属于浏览器“同源策略”中的一部分,其它的还有 Cookie 跨域 iframe 跨域,LocalStorage 跨域等这里不做介绍)

什么是 ajax 跨域

ajax 跨域的原理

ajax 出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”。
1995 年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。最初,它的含义是指,A 网页设置的 Cookie,B 网页不能打开,除非这两个网页 " 同源 "。所谓 " 同源 " 指的是 " 三个相同 ":协议相同、域名相同、端口相同。
随着互联网的发展," 同源政策 " 越来越严格。目前,如果非同源,共有三种行为受到限制。
(1) Cookie、LocalStorage 和 IndexDB 无法读取。
(2) DOM 无法获得。
(3) AJAX 请求不能发送。

CORS 请求原理

CORS 是一个 W3C 标准,全称是 " 跨域资源共享 "(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出 XMLHttpRequest 请求,从而克服了 AJAX 只能同源使用的限制。

基本上目前所有的浏览器都实现了 CORS 标准,其实目前几乎所有的浏览器 ajax 请求都是基于 CORS 机制的,只不过可能平时前端开发人员并不关心而已(所以说其实现在 CORS 解决方案主要是考虑后台该如何实现的问题)。

这里整理了一个实现原理图 (简化版):

ajax 跨域,这是最全的解决方案(一)

如何判断是否是简单请求?

浏览器将 CORS 请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

  • 只要同时满足以下两大条件,就属于简单请求。
  • 请求方法是以下三种方法之一:HEAD,GET,POST
    HTTP 的头信息不超出以下几种字段:
    (1)Accept
    (2)Accept-Language
    (3) Content-Language
    (4)Last-Event-ID
    (5) Content-Type(只限于三个值 application/x-www-form-urlencoded、 multipart/form-data、text/plain)
    凡是不同时满足上面两个条件,就属于非简单请求。

本文转载自 Think 体验设计公众号。

原文链接: https://mp.weixin.qq.com/s/SvO1-Jcmm7_Ybmidmx6nnA

评论

发布