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

CORS

当一个资源从与该资源本身所在的服务器的域或端口不同的域或不同的端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

比如，站点 http://domain-a.com 的某 HTML 页面通过 的 src 请求 http://domain-b.com/image.jpg
网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。

出于安全考虑，浏览器会限制从脚本内发起的跨域HTTP请求。

例如，XMLHttpRequest 和 Fetch 遵循同源策略。
因此，使用 XMLHttpRequest或 Fetch 的Web应用程序只能将HTTP请求发送到其自己的域。为了改进Web应用程序，开发人员要求浏览器厂商允许跨域请求。

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

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#HTTP_请求首部字段

Accept

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

Accept 请求HTTP头通知,哪些内容类型，表示为MIME类型，客户端能够理解。

Accept: <MIME_type>/<MIME_subtype>
Accept: <MIME_type>/*
Accept: */*

// Multiple types, weighted with the quality value syntax:
Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8

Accept: text/html
Accept: image/*
Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8

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