HTTP Headers

HTTP-Headers.md

HTTP Headers

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers

HTTP 消息头允许客户端和服务器通过 request和 response传递附加信息。 一个请求头由不区分大小写的名称后跟一个冒号“：”，然后跟然后值（不带换行符）组成。 该值前面的引导空白会被忽略。

http://www.tutorialspoint.com/http/http_header_fields.htm

https://en.wikipedia.org/wiki/List_of_HTTP_header_fields

demo

fetch('https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest',{
    method: 'get',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'X-Api-Key': `0987b00e542141369049e647701b65d9`
    }
})
.then(function(response) {
    return response.json()
}).then(function(json) {
    console.log('parsed json: ', json)
}).catch(function(error) {
    console.log('parsing failed: ', error)
});



fetch('https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest&apiKey=0987b00e542141369049e647701b65d9')
.then(function(response) {
    return response.json()
}).then(function(json) {
    console.log('parsed json: ', json)
}).catch(function(error) {
    console.log('parsing failed: ', error)
});

https://gist.github.com/xgqfrms-GitHub/d8afbd6484cf10da3603c6f51d6d4907

Content-Type

Content-Type 实体头部用于指示资源的MIME类型 media type 。

在响应中，Content-Type标头告诉客户端实际返回的内容的内容类型。
浏览器会在某些情况下进行MIME嗅探，并不一定遵循此标题的值;
为了防止这种行为，可以将标题 X-Content-Type-Options 设置为 nosniff。

在请求中 (如POST 或 PUT)，客户端告诉服务器实际发送的数据类型。

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Type

Content-Type: text/html; charset=utf-8
Content-Type: multipart/form-data; boundary=something

Access-Control-Request-Headers

当发出一个 preflight request时使用 Access-Control-Request-Headers 请求头，以便服务器知道在实际请求时将使用哪些HTTP标头。

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Request-Headers

Access-Control-Request-Method

使用 Access-Control-Request-Method请求头，当发出一个preflight request 时，让服务器知道在实际请求时将使用了哪种 HTTP 方法。

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Request-Method

Access-Control-Request-Method: POST

Response.headers

Response 接口的只读属性 headers 包含与响应关联的Headers对象。

https://developer.mozilla.org/zh-CN/docs/Web/API/Response/headers

Headers

Fetch API 的 Headers 接口允许您对HTTP请求和响应头执行各种操作。
这些操作包括检索，设置，添加和删除。
一个Headers对象具有关联的头列表，它最初为空，由零个或多个键值对组成。
你可以使用 append() 方法添加 之类的方法添加到此(参见 Examples)。
在该接口的所有方法中，标题名称由不区分大小写的字节序列匹配。

出于安全考虑，某些头只能由用户代理控制。这些头信息包括 forbidden header names 和 forbidden response header names。

https://developer.mozilla.org/zh-CN/docs/Web/API/Headers

let myHeaders = new Headers();

myHeaders.append('Content-Type', 'text/xml');

myHeaders.get('Content-Type');
// should return 'text/xml'

Response/headers

https://developer.mozilla.org/zh-CN/docs/Web/API/Response/headers

Response 接口的只读属性 headers 包含与响应关联的Headers对象。

fetch(
    `https://api.mlab.com/api/1/databases/node-mongodb/collections/test?q={"id": 2017003}&apiKey=pa4Yku0O7y6CHLqKwDGlLKSfkdPfQprR`,
    {
        method: 'put',
        data: JSON.stringify([]),
        headers: {
            'Accept': 'application/json',
            'Access-Control-Request-Method': 'PUT',
            'Content-Type': 'application/json'
        }
    }
).then(function(response) {
    return response.json()
}).then(function(json) {
    console.log('parsed json: ', json)
}).catch(function(error) {
    console.log('parsing failed: ', error)
});


fetch(
    'https://api.mlab.com/api/1/databases/node-mongodb/collections/test?q={"id": 2017003}&apiKey=pa4Yku0O7y6CHLqKwDGlLKSfkdPfQprR',
    {
        method: 'put',
        data: JSON.stringify([]),
        headers: {
            'Accept': 'application/json',
            'Access-Control-Request-Method': 'PUT',
            'Content-Type': 'application/json'
        }
    }
).then(function(response) {
    return response.json()
}).then(function(json) {
    console.log('parsed json: ', json)
}).catch(function(error) {
    console.log('parsing failed: ', error)
});

delete json data

const url = `https://api.mlab.com/api/1/databases/node-mongodb/collections/test?q={"name": "test"}&apiKey=pa4Yku0O7y6CHLqKwDGlLKSfkdPfQprR`;

fetch(url, {
    method: "PUT",
    body: JSON.stringify({}),
    headers: {
        "Content-Type": "application/json"
    },
    credentials: "same-origin"
}).then(function(response) {
    response.status; //=> number 100–599
    response.statusText;
    response.headers;
    response.url ;

    return response.text()
}, function(error) {
    error.message;
})

https://api.mlab.com/api/1/databases/node-mongodb/collections/test?apiKey=pa4Yku0O7y6CHLqKwDGlLKSfkdPfQprR

// https://api.mlab.com/api/1/databases/node-mongodb/collections/test?apiKey=pa4Yku0O7y6CHLqKwDGlLKSfkdPfQprR
const url = `https://api.mlab.com/api/1/databases/node-mongodb/collections/test?apiKey=pa4Yku0O7y6CHLqKwDGlLKSfkdPfQprR`;

fetch(url, {
    method: "PUT",
    body: JSON.stringify({}),
    headers: {
        'Accept': 'application/json',
        'Access-Control-Request-Method': 'PUT',
        'Content-Type': 'application/json'
    },
    credentials: "same-origin"
}).then(function(response) {
    response.status; //=> number 100–599
    response.statusText; //=> String
    response.headers; //=> Headers
    response.url; //=> String

    return response.text()
}, function(error) {
    error.message; //=> String
})

https://gist.github.com/xgqfrms-GitHub/636260e8332f0fe4f530fe040ffd3741

fetch('https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest',{
    method: 'get',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'X-Api-Key': `0987b00e542141369049e647701b65d9`
    }
})
.then(function(response) {
    return response.json()
}).then(function(json) {
    console.log('parsed json: ', json)
}).catch(function(error) {
    console.log('parsing failed: ', error)
});

fetch & json & Arrow functions

https://gist.github.com/xgqfrms-GitHub/b44ba9049575654e36e3032c58576931