jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

4
5-network/05-fetch-crossorigin/article.md
View file

@ -149,7 +149,7 @@ The browser plays the role of a trusted mediator here:
1. It ensures that the corrent `Origin` is sent with a cross-domain request.
2. If checks for correct `Access-Control-Allow-Origin` in the response, if it is so, then JavaScript access, otherwise forbids with an error.
![](xhr-another-domain.png)
![](xhr-another-domain.svg)
Here's an example of a permissive server response:
```
@ -215,7 +215,7 @@ If the server agrees to serve the requests, then it should respond with status 2
- The response header `Access-Control-Allow-Headers` must have a list of allowed headers.
- Additionally, the header `Access-Control-Max-Age` may specify a number of seconds to cache the permissions. So the browser won't have to send a preflight for subsequent requests that satisfy given permissions.
![](xhr-preflight.png)
![](xhr-preflight.svg)
Let's see how it works step-by-step on example, for a cross-domain `PATCH` request (this method is often used to update data):

BIN
5-network/05-fetch-crossorigin/cors-gmail-messages.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 38 KiB

54
5-network/05-fetch-crossorigin/cors-gmail-messages.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
5-network/05-fetch-crossorigin/cors-gmail-messages@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 89 KiB

BIN
5-network/05-fetch-crossorigin/xhr-another-domain.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 32 KiB

51
5-network/05-fetch-crossorigin/xhr-another-domain.svg Normal file
View file

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="610px" height="411px" viewBox="0 0 610 411" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>xhr-another-domain.svg</title>
<desc>Created with sketchtool.</desc>
<g id="network" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="xhr-another-domain.svg">
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="2" y="16" width="128" height="64"></rect>
<text id="JavaScript" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="36" y="50">JavaScript</tspan>
</text>
<rect id="Rectangle-228" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="238" y="16" width="128" height="64"></rect>
<text id="Browser" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="273" y="50">Browser</tspan>
</text>
<rect id="Rectangle-229" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="481" y="16" width="128" height="64"></rect>
<text id="Server" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="521" y="50">Server</tspan>
</text>
<path d="M67,81 L67,401" id="Line" stroke="#979797" stroke-linecap="square"></path>
<path d="M303,81 L303,401" id="Line" stroke="#979797" stroke-linecap="square"></path>
<path d="M546,81 L546,401" id="Line" stroke="#979797" stroke-linecap="square"></path>
<path id="Line" d="M284,141 L67,141 L67,139 L284,139 L284,133 L298,140 L284,147 L284,141 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="Origin:-https://java" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="26" fill="#8A704D">
<tspan x="331.3125" y="206">Origin: https://javascript.info</tspan>
</text>
<text id="HTTP-request" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="26" fill="#8A704D">
<tspan x="378.015137" y="169">HTTP-request</tspan>
</text>
<text id="fetch()" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="154" y="128">fetch()</tspan>
</text>
<text id="HTTP-response" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="27" fill="#8A704D">
<tspan x="374.918945" y="250">HTTP-response</tspan>
</text>
<text id="Access-Control-Allow" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="332" y="288">Access-Control-Allow-Origin: </tspan>
<tspan x="337.130371" y="306">* OR https://javascript.info</tspan>
</text>
<text id="if-the-header-allows" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="92" y="322">if the header allows, success,</tspan>
</text>
<text id="otherwise-fail" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="142" y="356">otherwise fail</tspan>
</text>
<path id="Line" d="M531,188 L305,188 L305,186 L531,186 L531,180 L545,187 L531,194 L531,188 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2" d="M317,264 L545,264 L545,266 L317,266 L317,272 L303,265 L317,258 L317,264 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-3" d="M85,332 L302,332 L302,334 L85,334 L85,340 L71,333 L85,326 L85,332 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
5-network/05-fetch-crossorigin/xhr-another-domain@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 74 KiB

BIN
5-network/05-fetch-crossorigin/xhr-preflight.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 57 KiB

82
5-network/05-fetch-crossorigin/xhr-preflight.svg Normal file
View file

@ -0,0 +1,82 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="610px" height="633px" viewBox="0 0 610 633" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>xhr-preflight.svg</title>
<desc>Created with sketchtool.</desc>
<g id="network" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="xhr-preflight.svg">
<rect id="Rectangle-227" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="1" y="16" width="128" height="64"></rect>
<text id="JavaScript" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="33" y="50">JavaScript</tspan>
</text>
<rect id="Rectangle-228" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="240" y="16" width="128" height="64"></rect>
<text id="Browser" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="278" y="48">Browser</tspan>
</text>
<rect id="Rectangle-229" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="480" y="16" width="128" height="64"></rect>
<text id="Server" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="523" y="50">Server</tspan>
</text>
<path d="M66,82 L66,602" id="Line" stroke="#979797" stroke-linecap="square"></path>
<path d="M305,82 L305,602" id="Line" stroke="#979797" stroke-linecap="square"></path>
<path d="M545,82 L545,602" id="Line" stroke="#979797" stroke-linecap="square"></path>
<path id="Line" d="M287.5,140.5 L66.5,140.5 L66.5,138.5 L287.5,138.5 L287.5,132.5 L301.5,139.5 L287.5,146.5 L287.5,140.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="fetch()" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="164" y="130">fetch()</tspan>
</text>
<text id="OPTIONS-Origin-Acces" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="395.000977" y="174">OPTIONS</tspan>
<tspan x="405.080566" y="192">Origin</tspan>
<tspan x="320.366211" y="210">Access-Control-Request-Method</tspan>
<tspan x="318.5" y="228">Access-Control-Request-Headers</tspan>
</text>
<path id="Line" d="M528.5,293.5 L307.5,293.5 L307.5,291.5 L528.5,291.5 L528.5,285.5 L542.5,292.5 L528.5,299.5 L528.5,293.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="200-OK" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="402.913574" y="287">200 OK</tspan>
<tspan x="330.866211" y="305">Access-Control-Allow-Method</tspan>
<tspan x="329" y="323">Access-Control-Allow-Headers</tspan>
<tspan x="347.82959" y="341">Access-Control-Max-Age</tspan>
</text>
<path id="Line-4" d="M527.5,180.5 L306.5,180.5 L306.5,178.5 L527.5,178.5 L527.5,172.5 L541.5,179.5 L527.5,186.5 L527.5,180.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-2" d="M322.5,500.5 L543.5,500.5 L543.5,502.5 L322.5,502.5 L322.5,508.5 L308.5,501.5 L322.5,494.5 L322.5,500.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-3" d="M90,552 L304,552 L304,555 L90,555 L90,563 L71,553.5 L90,544 L90,552 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="Access-Control-Allow" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="336" y="524">Access-Control-Allow-Origin</tspan>
</text>
<text id="Main-HTTP-response" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="355" y="495">Main HTTP-response</tspan>
</text>
<text id="otherwise-error" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="130" y="569">otherwise error</tspan>
</text>
<text id="if-allowed:-success," font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="116" y="545">if allowed: success,</tspan>
</text>
<path id="Line-5" d="M527.5,436.5 L306.5,436.5 L306.5,434.5 L527.5,434.5 L527.5,428.5 L541.5,435.5 L527.5,442.5 L527.5,436.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="Origin" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="405" y="456">Origin</tspan>
</text>
<text id="Main-HTTP-request" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" line-spacing="18" fill="#8A704D">
<tspan x="360" y="425">Main HTTP-request</tspan>
</text>
<text id="preflight" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal" fill="#9B9B9B">
<tspan x="205.943359" y="186">preflight</tspan>
</text>
<text id="if-allowed" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal" fill="#9B9B9B">
<tspan x="193.609375" y="441">if allowed</tspan>
</text>
<text id="1" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal" fill="#000000">
<tspan x="559.138672" y="186">1</tspan>
</text>
<text id="2" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal" fill="#000000">
<tspan x="559.138672" y="302">2</tspan>
</text>
<text id="3" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal" fill="#000000">
<tspan x="559.138672" y="443">3</tspan>
</text>
<text id="4" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal" fill="#000000">
<tspan x="559.138672" y="509">4</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
5-network/05-fetch-crossorigin/xhr-preflight@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 132 KiB