Xiaopei's DokuWiki

These are the good times in your life,
so put on a smile and it'll be alright

User Tools

Site Tools


it:http

HTTP

HTTP BODY

multipart/form-data

HTTP 请求体 格式如下

POST /upload
Content-Length: 1200164
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryqe5wb0iBnI5uiVQ5

------WebKitFormBoundaryqe5wb0iBnI5uiVQ5
Content-Disposition: form-data; name="hehe"

test
------WebKitFormBoundaryqe5wb0iBnI5uiVQ5
Content-Disposition: form-data; name="haha"

test
------WebKitFormBoundaryqe5wb0iBnI5uiVQ5
Content-Disposition: form-data; name="file"; filename="abc.xlsx"
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

¿Chrome 开发者工具大概会隐藏 http body 中文件的 binary 内容? 
------WebKitFormBoundaryqe5wb0iBnI5uiVQ5--

说明:

  1. Content-Type 为 multipart/form-data
  2. Content-Type 有一个附加的 boundary,是 http body 内不同参数的分隔符
  3. 参数可以有 string,也可以有文件
  4. ¿Chrome 开发者工具大概会隐藏 http body 中文件的 binary 内容?
  5. httpie 也会隐藏 binary data
    $ http --form  -vvv post localhost:8082/upload objectType=png  object@foo.png
    POST /upload HTTP/1.1
    Content-Length: 1200258
    Content-Type: multipart/form-data; boundary=2532bf749d1549b28c74eb92d00d625b
    
    
    
    +-----------------------------------------+
    | NOTE: binary data not shown in terminal |
    +-----------------------------------------+
  6. 但文件确实是上传了的,可以放心

对于客户端:

  1. 可以用 FormData 构造 form-data 形式的 Body,来做 Ajax:FormData 对象的使用 - Web API 接口 | MDN
    void append(DOMString name, Blob value, optional DOMString filename);
    void append(DOMString name, DOMString value);
  2. formData.append('myfile', file) 时,这个 file 是 File 对象:File - Web APIs | MDN
  3. console.log(file) 属性里也是没有文件的内容的,因为 File 继承自 Blob,console.log 读取不了 Blob,只有 FileReader 才行:Blob - Web API 接口 | MDN

application/x-www-form-urlencoded

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8
 
title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3
body = querystring.stringify(bodyObj);
r.body = body;
size = Buffer.byteLength(body); // 肯定是 ascii
r.headers['content-type'] = "application/x-www-form-urlencoded";
r.headers['content-length'] = size;

application/json

POST http://www.example.com HTTP/1.1 
Content-Type: application/json;charset=utf-8
 
{"title":"test","sub":[1,2,3]}
body = JSON.stringify(bodyObj);
r.body = body;
size = Buffer.byteLength(body, 'utf8');
r.headers['content-type'] = "application/json;charset=UTF-8";
r.headers['content-length'] = size;

text/xml

CORS

Cross-origin_resource_sharing

  1. The browser sends the OPTIONS request with an Origin HTTP header. The value of this header is the domain that served the parent page. When a page from http://www.foo.com attempts to access a user's data in bar.com, the following request header would be sent to bar.com:
    Origin: http://www.foo.com
  2. The server may respond with:
    1. An Access-Control-Allow-Origin (ACAO) header in its response indicating which origin sites are allowed. For example:
      Access-Control-Allow-Origin: http://www.foo.com
    2. An error page if the server does not allow the cross-origin request
    3. An Access-Control-Allow-Origin (ACAO) header with a wildcard that allows all domains:
      Access-Control-Allow-Origin: *

用 CDN 后应注意需在 CDN 上做与服务器相同的 CORS 配置,字体加载可能会遇到问题

Cache

参考

it/http.txt · Last modified: 2017/07/19 21:32 by admin