Web高级 Ajax和跨域CORS

时间：2018-10-19 22:04:41 阅读：187 评论：0 收藏：0 [点我收藏+]

标签：png password server 没有 success 新一代链式 font zh-cn

Asynchronous JavaScript and XML

1. XMLHttpRequest

前端开发都知道,不多说。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;
    if (xhr.status >= 200 && xhr.status < 300) {
        console.log(JSON.parse(xhr.responseText));
    }
    else {
        // What to do when the request has failed
        console.log(‘error‘, xhr);
    }
};
xhr.open(‘GET‘, ‘https://mysite.com/index‘);
xhr.setRequestHeader(‘X-Token‘, ‘123456‘); 
xhr.send();

1.1 open方法

定义：open( Method, URL, Asynchronous, UserName, Password )
- Method:GET/POST/HEAD/PUT/DELETE/OPTIONS
- Asynchronous(defualt true)

1.2 setRequestHeader方法

定义：setRequestHeader( Name, Value )
注意，以X开头的为header为自定义头部

1.3 send方法

定义：send(body)

body可以是：document，Blob, BufferSource, FormData, URLSearchParams, ReadableStream等

2. Fetch

新一代旨在替换XHR的API方法。

fetch("https://mysite.com/index", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
    ‘X-Token‘: ‘123456‘
  },
  body: "id=123"
}).then(function (response) {
    if (response.ok) {
        return response.json();
    } else {
        return Promise.reject({
            status: response.status,
            statusText: response.statusText
        });
    }
})
.then(function (data) {
    console.log(‘success‘, data);
})
.catch(function (error) {
    console.log(‘error‘, error);
});

2.1 fetch方法

定义：fetch(input, init)

input:URL或者Request对象
init:一个配置项对象，包括所有对请求的设置。可选的参数有：
- method: 请求使用的方法，如 GET、POST。
- headers: 请求的头信息，形式为 Headers 对象或 ByteString。
- body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
- mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
- credentials: 请求的 credentials，如 omit、same-origin 或者 include。
- cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.

2.2 回调

fetch返回一个promise，采用then的链式调用避免回调地狱问题。

2.3 返回值

参考这里：https://developer.mozilla.org/zh-CN/docs/Web/API/Response

3. XHR vs Fetch

Fetch返回值不是可读的形式，需要使用response.json()转换为可读形式
XHR的请求失败通过判断状态码,Fetch请求失败通过catch处理
Fetch默认不带cookie,XHR默认带cookie
Fetch在服务器返回 400，500 错误码时并不会reject而被当做成功处理进then，只有网络错误这些导致请求不能完成才会触发catch
Fetch没有abort和onTimeout,不能中途中断,XHR可以。

CORS是一种机制，用来保护跨域数据传输的安全性和降低风险。

1. 常见的可以跨域请求的资源

XHR或Fetch发起的跨域HTTP请求
Web字体
CSS文件
Scripts文件

2. 跨域相关的Http首部

Access-Control-Request-Headers
(Preflight使用)客户端告诉服务器实际请求时使用的头部。
Access-Control-Request-Method
(Preflight使用)客户端告诉服务器实际请求时使用的方法。
Access-Control-Allow-Origin
服务端允许请求的源域
Access-Control-Allow-Credentials
服务端是否允许请求带cookie,设置为true时allow-origin不能为*
Access-Control-Allow-Headers
服务端允许的客户端请求的头部
Access-Control-Allow-Methods
服务端允许客户端请求的方法
Access-Control-Max-Age
preflight可以被缓存的时间
Cross-Origin-Resource-Policy
(fetch使用)具体查看https://fetch.spec.whatwg.org/#cross-origin-resource-policy-header
Origin
客户端请求从哪个域来

1. OPTIONS /resources/post-here/ 
2. HTTP/1.1
3. Host: bar.other
4. User-Agent: Mozilla/5.0 (Macintosh; U; 5.Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
6. Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
7. Accept-Language: en-us,en;q=0.5
8. Accept-Encoding: gzip,deflate
9. Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
10. Connection: keep-alive
11. Origin: http://foo.example
12. Access-Control-Request-Method: POST
13. Access-Control-Request-Headers: X-PINGOTHER, Content-Type

//响应
14. HTTP/1.1 200 OK
15. Date: Mon, 01 Dec 2008 01:15:39 GMT
16. Server: Apache/2.0.61 (Unix)
17. Access-Control-Allow-Origin: http://foo.example
18. Access-Control-Allow-Methods: POST, GET, OPTIONS
19. Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
20. Access-Control-Max-Age: 86400
21. Vary: Accept-Encoding, Origin
22. Content-Encoding: gzip
23. Content-Length: 0
24. Keep-Alive: timeout=2, max=100
25. Connection: Keep-Alive
26. Content-Type: text/plain

3. 简单请求

跨域请求分为简单请求和预检请求,全部符合下列条件时为简单请求：

使用的方法为：GET/HEAD/POST
不得设置安全首页之外的首页：Accept,Accept-Language,Content-Language,Content-Type,DPR,Downlink,Save-Data,Viewport-Width,Width
Content-Type只能是以下值: text/plain, multipart/form-data, application/x-www-form-urlencoded
请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器
请求中没有使用 ReadableStream 对象

当使用普通请求时,如果服务器允许该源域跨域请求资源,则直接返回响应。如果服务器不允许跨域请求，则返回不正确的响应首部，则请求方不会收到任何数据。

技术分享图片