HTTPS/HTTP Ajax Header & CORS & mlab, mongodb, db, json, api, free , online,

http-ajax-header-CORS.md

HTTPS/HTTP Ajax Header & CORS

mlab, mongodb, db, json, api, free , online,

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)
});

在正文中指定空列表等同于删除与查询匹配的文档。

    

// {"id": 2017003, "name": "test", "age": 27}

$.ajax({
    url: "https://api.mlab.com/api/1/databases/node-mongodb/collections/test?apiKey=pa4Yku0O7y6CHLqKwDGlLKSfkdPfQprR",
    data: JSON.stringify([]),
    type: "PUT",
    contentType: "application/json" 
});

$.ajax({
    url: "https://api.mlab.com/api/1/databases/node-mongodb/collections/test?apiKey=pa4Yku0O7y6CHLqKwDGlLKSfkdPfQprR",
    type: "DELETE",
    accepts: {
        contentType: "application/json",
    },
    async: true,
    timeout: 300000,
    success: function (data) {
        console.log(data);
     },
    error: function (xhr, status, err) {
        console.log(xhr, status, err);
    }
});

Method DELETE is not allowed by Access-Control-Allow-Methods in preflight response.

http://docs.mlab.com/data-api/#delete-documents

Access-Control-Allow-Methods

response headers

headers.add("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");

https://stackoverflow.com/questions/36374247/always-got-method-delete-is-not-allowed-by-access-control-allow-methods-in-prefl

https://stackoverflow.com/questions/28990565/delete-is-not-allowed-by-access-control-allow-methods

https://stackoverflow.com/questions/39312736/method-delete-is-not-allowed-by-access-control-allow-methods-in-preflight-respon

https://api.jquery.com/jQuery.ajax/

    
$.ajax({
  accepts: {
    mycustomtype: 'application/x-some-custom-type'
  },
  // Instructions for how to deserialize a `mycustomtype`
  converters: {
    'text mycustomtype': function(result) {
      // Do Stuff
      return newresult;
    }
  },
  // Expect a `mycustomtype` back from server
  dataType: 'mycustomtype'
});

http://docs.mlab.com/data-api/#delete-documents

delete & update

    
$.ajax({
    url: 'https://api.mlab.com/api/1/databases/my-db/collections/my-coll?apiKey=myAPIKey',
    data: JSON.stringify([{"x": 1}, {"x": 2}, {"x": 3}]),
    type: "PUT",
    contentType: "application/json" 
});

??? DELETE

Specifying an empty list in the body is equivalent to deleting the documents matching the query.

在正文中指定空列表等同于删除与查询匹配的文档。

    
$.ajax({
    url: 'https://api.mlab.com/api/1/databases/my-db/collections/my-coll?apiKey=myAPIKey',
    data: JSON.stringify([{"x": 1}, {"x": 2}, {"x": 3}]),
    type: "DELETE",
    contentType: "application/json" 
});

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对象。

https://api.jquery.com/jQuery.getJSON/

在正文中指定空列表等同于删除与查询匹配的文档。

// {"id": 2017003, "name": "test", "age": 27}

$.ajax({
    url: "https://api.mlab.com/api/1/databases/node-mongodb/collections/test?apiKey=pa4Yku0O7y6CHLqKwDGlLKSfkdPfQprR",
    data: JSON.stringify([]),
    type: "PUT",
    contentType: "application/json" 
});

$.ajax({
    url: "https://api.mlab.com/api/1/databases/node-mongodb/collections/test?apiKey=pa4Yku0O7y6CHLqKwDGlLKSfkdPfQprR",
    type: "DELETE",
    accepts: {
        contentType: "application/json",
    },
    async: true,
    timeout: 300000,
    success: function (data) {
        console.log(data);
     },
    error: function (xhr, status, err) {
        console.log(xhr, status, err);
    }
});

fetch

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)
});

get datas

fetch(
    `https://api.mlab.com/api/1/databases/node-mongodb/collections/test?q={"id": 2017003}&apiKey=pa4Yku0O7y6CHLqKwDGlLKSfkdPfQprR`,{
        method: 'get',
        headers: {
            'Accept': 'application/json',
            '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)
});

// parsed json: (2) [Object, Object]

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

https://api.mlab.com/api/1/databases/node-mongodb/collections/test?q={%22id%22:%202017003}&apiKey=pa4Yku0O7y6CHLqKwDGlLKSfkdPfQprR

React APPs DB

https://mlab.com/databases/react-apps/collections/test

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

angular 2/4

http://courses.angularclass.com/

https://coursetro.com/courses/14/React-vs-Angular-vs-Vue-by-Example

https://facebook.github.io/react/docs/introducing-jsx.html

https://github.com/codeschool/WatchUsBuild-React/blob/gh-pages/public/index.html

React reading...

https://scotch.io/courses/getting-started-with-react/managing-state-of-a-component

https://online.reacttraining.com/courses/50507/lectures/2466660

https://www.codecademy.com/courses/react-101/lessons/react-jsx-intro/exercises/why-react?action=lesson_resume

https://www.udemy.com/nodejs-codeless-api-creation-up-and-running-with-swagger/learn/v4/t/lecture/6369188?start=0

https://egghead.io/lessons/react-write-a-higher-order-component-from-scratch

this-api-is-so-fetching

https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/

fetch("http://www.example.org/submit.php", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body: "firstName=Nikhil&favColor=blue&password=easytoguess"
}).then(function(res) {
  if (res.ok) {
    alert("Perfect! Your settings are saved.");
  } else if (res.status == 401) {
    alert("Oops! You are not authorized.");
  }
}, function(e) {
  alert("Error submitting form!");
});

Fetch API

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

body: JSON.stringify(data),

fetch(url, {
  method: "POST",
  body: JSON.stringify(data),
  headers: {
    "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://caniuse.com/#search=Fetch

https://github.github.io/fetch/
https://github.com/github/fetch

$ npm install --save whatwg-fetch

const fetch = require('whatwg-fetch')

import * from 'whatwg-fetch';

import  'whatwg-fetch';

import * as fetch from 'whatwg-fetch';

https://fetch.spec.whatwg.org/

polyfill

https://www.npmjs.com/package/fetch-polyfill

https://caniuse.com/#feat=promises

https://github.com/taylorhakes/promise-polyfill

MDN

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

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

https://developers.google.com/web/updates/2015/03/introduction-to-fetch?lg=zh

https://github.com/jfw10973/fetch-plugin/blob/master/src/index.js

https://github.github.io/fetch/#request-body

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

getComputedStyle

Window.getComputedStyle() 方法给出应用活动样式表后的元素的所有CSS属性的值，并解析这些值可能包含的任何基本计算。

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

let style = window.getComputedStyle(element, [pseudoElt]);

// element 用于获取计算样式的Element

// pseudoElt 可选 指定一个要匹配的伪元素的字符串。
// 必须对普通元素省略（或null）。

Window.getDefaultComputedStyle()

getDefaultComputedStyle() 给出元素的所有CSS属性的默认计算值(computed values )，忽略作者样式。
也就是说，只考虑用户代理和用户风格。

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

CSSStyleDeclaration.getPropertyCSSValue()

此功能已过时。虽然它可能仍然在某些浏览器中工作，但是它的使用是不鼓励的，因为它可以随时被删除。尽量避免使用它。

CSSStyleDeclaration.getPropertyCSSValue() 方法接口返回一个CSSValue 包含一个属性的CSS值。
请注意，如果属性名称是速记属性，则返回null。

let value = style.getPropertyCSSValue(property);

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

computed_value

一个CSS属性的 计算值 (computed value) 通过以下方式从指定的值计算而来：

• 处理特殊的值 inherit 和 initial，以及
• 进行计算，以达到属性摘要中“计算值”行中描述的值。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/computed_value

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
})

headers.add("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");

"Access-Control-Allow-Origin", "*"


"Access-Control-Allow-Origin": "*",

CORS & CSP

https://gist.github.com/xgqfrms-GitHub/840fe27cecb9e7217fb4f0b09db19406

RegExp

js spider & auto download images

https://gist.github.com/xgqfrms-GitHub/0bf82ff06037a0d1776c9f30033cbfd1

svg_name_arr = [
    "ruby",
    "php",
    "node",
    "python",
    "net",
    "java",
    "golang",
    "laravel",
    "meteor",
    "clojure",
    "haskell",
    "erlang",
    "elixir",
    "google-cloud-platform",
    "perl",
    "r",
    "rust",
    "other",
    "javascript",
    "react",
    "angular",
    "angular",
    "ember",
    "backbone",
    "android",
    "ios",
    "ionic",
    "flash",
    "other",
    "fluentd",
    "logentries",
    "logstash",
    "mailgun",
    "other",
    "slack",
    "hipchat",
    "flowdock",
    "campfire",
    "github",
    "bitbucket",
    "gitlab",
    "jira",
    "trello",
    "github",
    "bitbucket",
    "gitlab",
    "pivotal",
    "asana",
    "sprintly",
    "pagerduty",
    "victorops",
    "opsgenie image-list",
    "datadog",
    "webhooks",
    "helpscout",
    "split",
    "bash",
    "bitbucket",
    "capistrano",
    "engineyard",
    "fabric",
    "heroku",
    "msbuild",
    "powershell",
    "octopus",
    "other",
    "ruby",
    "php",
    "node",
    "python",
    "net",
    "java",
    "golang",
    "laravel",
    "meteor",
    "clojure",
    "haskell",
    "erlang",
    "elixir",
    "google-cloud-platform",
    "perl",
    "r",
    "rust",
    "other",
    "javascript",
    "react",
    "angular",
    "angular",
    "ember",
    "backbone",
    "android",
    "ios",
    "ionic",
    "flash",
    "other",
    "fluentd",
    "logentries",
    "logstash",
    "mailgun",
    "other"
];


svg_url_obj = {
    0: "https://rollbar.com/assets/shared/logos/ruby-icon.svg",
    1: "https://rollbar.com/assets/shared/logos/php-icon.svg",
    2: "https://rollbar.com/assets/shared/logos/node-icon.svg",
    3: "https://rollbar.com/assets/shared/logos/python-icon.svg",
    4: "https://rollbar.com/assets/shared/logos/dotnet-icon.svg",
    5: "https://rollbar.com/assets/shared/logos/java-icon.svg",
    6: "https://rollbar.com/assets/shared/logos/go-icon.png",
    7: "https://rollbar.com/assets/shared/logos/laravel-icon.svg",
    8: "https://rollbar.com/assets/shared/logos/meteor-icon.svg",
    9: "https://rollbar.com/assets/shared/logos/clojure-icon.gif",
    10: "https://rollbar.com/assets/shared/logos/haskell-icon.png",
    11: "https://rollbar.com/assets/shared/logos/erlang-icon.png",
    12: "https://rollbar.com/assets/shared/logos/elixir-icon.png",
    13: "https://rollbar.com/assets/shared/logos/google-cloud-platform-icon.png",
    14: "https://rollbar.com/assets/shared/logos/perl-icon.svg",
    15: "https://rollbar.com/assets/shared/logos/r-icon.svg",
    16: "https://rollbar.com/assets/shared/logos/rust-icon.svg",
    17: "none",
    18: "https://rollbar.com/assets/shared/logos/javascript-icon.png",
    19: "https://rollbar.com/assets/shared/logos/react-icon.svg",
    20: "https://rollbar.com/assets/shared/logos/angular-icon.svg",
    21: "https://rollbar.com/assets/shared/logos/angular-icon.svg",
    22: "https://rollbar.com/assets/shared/logos/ember-icon.png",
    23: "https://rollbar.com/assets/shared/logos/backbone-icon.svg",
    24: "https://rollbar.com/assets/shared/logos/android-icon.svg",
    25: "https://rollbar.com/assets/shared/logos/apple-icon.svg",
    26: "https://rollbar.com/assets/shared/logos/ionic-icon.png",
    27: "https://rollbar.com/assets/shared/logos/actionscript-icon.png",
    28: "none",
    29: "https://rollbar.com/assets/shared/logos/fluentd-icon.svg",
    30: "https://rollbar.com/assets/shared/logos/logentries-icon.png",
    31: "https://rollbar.com/assets/shared/logos/logstash-icon.png",
    32: "https://rollbar.com/assets/shared/logos/mailgun-icon.png",
    33: "none",
    34: "https://rollbar.com/assets/shared/logos/slack-icon.png",
    35: "https://rollbar.com/assets/shared/logos/hipchat-icon.png",
    36: "https://rollbar.com/assets/shared/logos/flowdock-icon.png",
    37: "https://rollbar.com/assets/shared/logos/campfire-icon.png",
    38: "https://rollbar.com/assets/shared/logos/github-icon.png",
    39: "https://rollbar.com/assets/shared/logos/bitbucket-icon.png",
    40: "https://rollbar.com/assets/shared/logos/gitlab-icon.png",
    41: "https://rollbar.com/assets/shared/logos/jira-logo-horiz.png",
    42: "https://rollbar.com/assets/shared/logos/trello-icon.png",
    43: "https://rollbar.com/assets/shared/logos/github-icon.png",
    44: "https://rollbar.com/assets/shared/logos/bitbucket-icon.png",
    45: "https://rollbar.com/assets/shared/logos/gitlab-icon.png",
    46: "https://rollbar.com/assets/shared/logos/pivotal-icon.png",
    47: "https://rollbar.com/assets/shared/logos/asana-logo-vert.png",
    48: "https://rollbar.com/assets/shared/logos/sprintly-icon.png",
    49: "https://rollbar.com/assets/shared/logos/pagerduty-icon.png",
    50: "https://rollbar.com/assets/shared/logos/victorops-icon.svg",
    51: "https://rollbar.com/assets/shared/logos/opsgenie-icon.png",
    52: "https://rollbar.com/assets/shared/logos/datadog-icon.png",
    53: "https://rollbar.com/assets/shared/logos/webhooks-icon.png",
    54: "https://rollbar.com/assets/shared/logos/helpscout-icon.svg",
    55: "https://rollbar.com/assets/shared/logos/split-icon.png",
    56: "https://rollbar.com/assets/shared/logos/bash-icon.png",
    57: "https://rollbar.com/assets/shared/logos/bitbucket-icon.png",
    58: "https://rollbar.com/assets/shared/logos/capistrano-icon.png",
    59: "https://rollbar.com/assets/shared/logos/engineyard-logo-horiz.png",
    60: "https://rollbar.com/assets/shared/logos/fabric-icon.png",
    61: "https://rollbar.com/assets/shared/logos/heroku-icon.svg",
    62: "https://rollbar.com/assets/shared/logos/msbuild-icon.png",
    63: "https://rollbar.com/assets/shared/logos/powershell-icon.png",
    64: "https://rollbar.com/assets/shared/logos/octopus-icon.png",
    65: "none"
};

no-cors

https://gist.github.com/xgqfrms-GitHub/68af127cb3ec33587ee5bffe9810fb1b

站点流量统计

https://gist.github.com/xgqfrms-GitHub/6a16df85644b814265abe98150280d0f

let myImage = document.querySelector('img');

let myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/png');

const myInit = {
    method: 'GET',
    headers: myHeaders,
    mode: 'cors',
    cache: 'default'
};

let myRequest = new Request('https://cdn.xgqfrms.xyz/logo/icon.png');

fetch(myRequest, myInit)
.then(function(response) {
    return response.blob();
})
.then(function(blob) {
    var objectURL = URL.createObjectURL(blob);
    myImage.src = objectURL;
});

Revealing-Prototype-Pattern & IIFE

https://stackoverflow.com/a/40930502/5934465