非同源与http辅助演示

非同源地址进行跨域请求演示：

1
2
3
4

 var xhr = new XMLHttpRequest();
xhr.open('get', '接口');
    xhr.send();

http辅助演示文件：

http的get请求的请求报文组成演示：

​ 第一行为请求行

GET /api/getbooksid=1&bookname=%E8%A5%BF%E6%B8%B8%E8%AE%B0 HTTP/1.1

后面的部分为请求头

• 请求头是本次请求的相关信息

• 这些信息大部分都是浏览器自动设置的

  我们自己设置过一些： Content-Type

• Host: 接口

  Connection: keep-alive

  Accept: /

  User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)

  Chrome/79.0.3945.79Safari/537.36

  Origin: null

  Accept-Encoding: gzip, deflate

  Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

  If-None-Match: W/“91-hlrWKV2QmzU6DUa8qes2AyEeCbs”

注：请求体是用来保存请求发送的数据使用的，get请求的请求参数都在url中发送，请求体为空

http的post请求的请求报文组成演示：

----请求行----

POST /api/addbook HTTP/1.1

----请求头----

Host: 接口

Connection: keep-alive

Content-Length: 112

Accept: /

User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79

Safari/537.36

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

Origin: null

Accept-Encoding: gzip, deflate

Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

注：post的请求参数是在请求体中发送的

之前在请求头中设置的Content-Type是用来指定请求体的内容类型的

响应报文演示：

----状态行-----

HTTP/1.1 200 OK

----响应头信息----

响应头保存的是响应的相关信息

X-Powered-By: Express

Access-Control-Allow-Origin:

Date: Mon, 24 Feb 2020 08:59:57 GMT

—响应报文中的Content-Type指的是响应的数据的内容类型—

Content-Type: application/json; charset=utf-8

Content-Length: 145

ETag: W/“91-hlrWKV2QmzU6DUa8qes2AyEeCbs”

注：响应体指的是服务器响应给客户端的数据，其实就是我们一直使用的res