diff --git a/5-network/05-fetch-crossorigin/article.md b/5-network/05-fetch-crossorigin/article.md index ba46bc49..0c142969 100644 --- a/5-network/05-fetch-crossorigin/article.md +++ b/5-network/05-fetch-crossorigin/article.md @@ -214,6 +214,7 @@ A preflight request uses method `OPTIONS`, no body and two headers: If the server agrees to serve the requests, then it should respond with empty body, status 200 and headers: +- `Access-Control-Allow-Origin` must be either `*` or the requesting origin, such as `https://javascript.info`, to allow it. - `Access-Control-Allow-Methods` must have the allowed method. - `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. @@ -265,10 +266,13 @@ The server should respond with status 200 and headers: That allows future communication, otherwise an error is triggered. -If the server expects other methods and headers in the future, it makes sense to allow them in advance by adding to the list: +If the server expects other methods and headers in the future, it makes sense to allow them in advance by adding to the list. + +For example, this response also allows `PUT`, `DELETE` and additional headers: ```http 200 OK +Access-Control-Allow-Origin: https://javascript.info Access-Control-Allow-Methods: PUT,PATCH,DELETE Access-Control-Allow-Headers: API-Key,Content-Type,If-Modified-Since,Cache-Control Access-Control-Max-Age: 86400 @@ -276,7 +280,7 @@ Access-Control-Max-Age: 86400 Now the browser can see that `PATCH` is in `Access-Control-Allow-Methods` and `Content-Type,API-Key` are in the list `Access-Control-Allow-Headers`, so it sends out the main request. -Besides, the preflight response is cached for time, specified by `Access-Control-Max-Age` header (86400 seconds, one day), so subsequent requests will not cause a preflight. Assuming that they fit the cached allowances, they will be sent directly. +If there's header `Access-Control-Max-Age` with a number of seconds, then the preflight permissions are cached for the given time. The response above will be cached for 86400 seconds (one day). Within this timeframe, subsequent requests will not cause a preflight. Assuming that they fit the cached allowances, they will be sent directly. ### Step 3 (actual request) diff --git a/5-network/05-fetch-crossorigin/xhr-another-domain.svg b/5-network/05-fetch-crossorigin/xhr-another-domain.svg index 735ab6c7..2c1b1a9a 100644 --- a/5-network/05-fetch-crossorigin/xhr-another-domain.svg +++ b/5-network/05-fetch-crossorigin/xhr-another-domain.svg @@ -1 +1 @@ -JavaScriptBrowserServerOrigin: https://javascript.infoHTTP-requestfetch()HTTP-responseAccess-Control-Allow-Origin: * OR https://javascript.infoif the header allows, then success,otherwise fail \ No newline at end of file +JavaScriptBrowserServerOrigin: https://javascript.infoHTTP-requestfetch()HTTP-responseAccess-Control-Allow-Origin: * (or https://javascript.info)if the header allows, then success,otherwise fail \ No newline at end of file diff --git a/5-network/05-fetch-crossorigin/xhr-preflight.svg b/5-network/05-fetch-crossorigin/xhr-preflight.svg index 89e4a1d2..4ce92b5b 100644 --- a/5-network/05-fetch-crossorigin/xhr-preflight.svg +++ b/5-network/05-fetch-crossorigin/xhr-preflight.svg @@ -1 +1 @@ -JavaScriptBrowserServerfetch()OPTIONSOrigin Access-Control-Request-Method Access-Control-Request-Headers200 OKAccess-Control-Allow-OriginMain HTTP-responseotherwise errorif allowed: success,OriginMain HTTP-requestpreflightif allowed1234 Access-Control-Allow-Method Access-Control-Allow-Headers Access-Control-Max-Age \ No newline at end of file +JavaScriptBrowserServerfetch()OPTIONSOrigin Access-Control-Request-Method Access-Control-Request-Headers200 OKAccess-Control-Allow-OriginMain HTTP-responseotherwise errorif allowed: success,OriginMain HTTP-requestpreflightif allowed1234 Access-Control-Allow-Origin Access-Control-Allow-Method Access-Control-Allow-Headers Access-Control-Max-Age \ No newline at end of file diff --git a/figures.sketch b/figures.sketch index f769ccb7..6ce5e03c 100644 Binary files a/figures.sketch and b/figures.sketch differ