From 31f83a5e1ba918a92c90d9716fd4ef63f5d771ff Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Mon, 18 Mar 2019 23:35:45 +0300 Subject: [PATCH] network draft --- 7-network/10-xmlhttprequest/article.md | 17 + 7-network/2-fetch-crossorigin/article.md | 471 +- .../{progress.view => demo.view}/index.html | 0 .../2-fetch-crossorigin/demo.view/server.js | 31 + .../progress.view/long.txt | 26973 ---------------- .../xhr-another-domain.png | Bin 47148 -> 34319 bytes .../xhr-another-domain@2x.png | Bin 117427 -> 76912 bytes .../2-fetch-crossorigin/xhr-preflight.png | Bin 49591 -> 57207 bytes .../2-fetch-crossorigin/xhr-preflight@2x.png | Bin 114905 -> 133797 bytes 7-network/3-fetch-api/article.md | 2 +- 7-network/6-url/url-object.png | Bin 16092 -> 16066 bytes 7-network/6-url/url-object@2x.png | Bin 36138 -> 36078 bytes figures.sketch | Bin 4199270 -> 4201193 bytes 13 files changed, 245 insertions(+), 27249 deletions(-) rename 7-network/2-fetch-crossorigin/{progress.view => demo.view}/index.html (100%) create mode 100644 7-network/2-fetch-crossorigin/demo.view/server.js delete mode 100644 7-network/2-fetch-crossorigin/progress.view/long.txt diff --git a/7-network/10-xmlhttprequest/article.md b/7-network/10-xmlhttprequest/article.md index e419c2e0..f554b171 100644 --- a/7-network/10-xmlhttprequest/article.md +++ b/7-network/10-xmlhttprequest/article.md @@ -445,6 +445,23 @@ function upload(file) { ``` +## Cross-origin requests + +`XMLHttpRequest` can make cross-domain requests, using the same CORS policy as `fetch`. + +Just like `fetch`, it doesn't send cookies and HTTP-authorization to another origin by default. To enable them, set `xhr.withCredentials` to `true`: + +```js +let xhr = new XMLHttpRequest(); +*!* +xhr.withCredentials = true; +*/!* +s +xhr.open('POST', 'http://anywhere.com/request'); +... +``` + + ## Summary Typical code of the GET-request with `XMLHttpRequest`: diff --git a/7-network/2-fetch-crossorigin/article.md b/7-network/2-fetch-crossorigin/article.md index 8c7976f2..bb4eb66e 100644 --- a/7-network/2-fetch-crossorigin/article.md +++ b/7-network/2-fetch-crossorigin/article.md @@ -1,10 +1,10 @@ -# Cross-Origin Fetch +# Cross-Origin Requests If we make a `fetch` from an arbitrary web-site, that will probably fail. The core concept here is *origin* -- a domain/port/protocol triplet. -Cross-origin requests -- those sent to another domain or protocol or port -- require special headers from the remote side. +Cross-origin requests -- those sent to another domain or protocol or port -- require special headers from the remote side. That policy is called "CORS": Cross-Origin Resource Sharing. For instance, let's try fetching from `http://example.com`: @@ -20,373 +20,294 @@ Fetch fails, as expected. ## Why? -Cross-origin requests are subject to the special safety control with the sole purpose to protect the internet from evil hackers. +Because cross-origin restrictions protect the internet from evil hackers. Seriously. Let's make a very brief historical digression. -For many years Javascript was unable to perform network requests. +For many years Javascript did not have any special methods to perform network requests. -The main way to send a request to another site was an HTML `
` with either `POST` or `GET` method. People submitted it to ` + + +
- ``` -So, it *was* possible to make a request. But if the submission was to another site, then the main window was forbidden to access `