You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 5-network/04-fetch-crossorigin/article.md
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -86,7 +86,7 @@ Let's say we need to get the data from `http://another.com` this way:
86
86
humidity:78
87
87
});
88
88
```
89
-
4.As the script executes, `gotWeather` runs, and, as it's our function, we have the data.
89
+
4.When the remote script loads and executes, `gotWeather` runs, and, as it's our function, we have the data.
90
90
91
91
92
92
@@ -152,7 +152,7 @@ The browser plays the role of a trusted mediator here:
152
152
153
153

154
154
155
-
Here's an example of an "accepting" response:
155
+
Here's an example of a permissive server response:
156
156
```
157
157
200 OK
158
158
Content-Type:text/html; charset=UTF-8
@@ -177,7 +177,7 @@ Any other response header is forbidden.
177
177
```smart header="Please note: no `Content-Length`"
178
178
Please note: there's no `Content-Length` header in the list!
179
179
180
-
So, if we're downloading something and would like to track the percentage of progress, then an additional permission is required to access that header (see below).
180
+
This header contains the full response length. So, if we're downloading something and would like to track the percentage of progress, then an additional permission is required to access that header (see below).
181
181
```
182
182
183
183
To grant JavaScript access to any other response header, the server must list it in the `Access-Control-Expose-Headers` header.
@@ -233,11 +233,11 @@ let response = await fetch('https://site.com/service.json', {
233
233
There are three reasons why the request is not simple (one is enough):
234
234
- Method `PATCH`
235
235
- `Content-Type` is not one of: `application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`.
236
-
- Custom `API-Key` header.
236
+
- "Non-simple" `API-Key` header.
237
237
238
238
### Step 1 (preflight request)
239
239
240
-
The browser, on its own, sends a preflight request that looks like this:
240
+
Prior to sending our request, the browser, on its own, sends a preflight request that looks like this:
241
241
242
242
```
243
243
OPTIONS /service.json
@@ -260,9 +260,9 @@ The server should respond with status 200 and headers:
That would allow future communication, otherwise an error is triggered.
263
+
That allows future communication, otherwise an error is triggered.
264
264
265
-
If the server expects other methods and headers, makes sense to list them all at once, e.g:
265
+
If the server expects other methods and headers in the future, makes sense to allow them in advance by adding to the list:
266
266
267
267
```
268
268
200 OK
@@ -312,17 +312,17 @@ Why?
312
312
313
313
That's because a request with credentials is much more powerful than an anonymous one. If allowed, it grants JavaScript the full power to act and access sensitive information on behalf of a user.
314
314
315
-
Does the server really trust pages from `Origin` that much? A request with credentials needs an additional header to pass through.
315
+
Does the server really trust pages from `Origin` that much? Then it must explicitly allow requests with credentials with an additional header.
316
316
317
-
To enable credentials, we need to add the option `credentials: "include"`, like this:
317
+
To send credentials, we need to add the option `credentials: "include"`, like this:
318
318
319
319
```js
320
320
fetch('http://another.com', {
321
321
credentials: "include"
322
322
});
323
323
```
324
324
325
-
Now `fetch` sends cookies originating from `another.com` with the request.
325
+
Now `fetch` sends cookies originating from `another.com` with out request to that site.
326
326
327
327
If the server wishes to accept the request with credentials, it should add a header `Access-Control-Allow-Credentials: true` to the response, in addition to `Access-Control-Allow-Origin`.
328
328
@@ -356,10 +356,10 @@ So, practical difference is that simple requests are sent right away, with `Orig
356
356
**For simple requests:**
357
357
358
358
- → The browser sends `Origin` header with the origin.
359
-
- ← For requests without credentials (default), the server should set:
360
-
- `Access-Control-Allow-Origin` to `*` or same as `Origin`
359
+
- ← For requests without credentials (not sent default), the server should set:
360
+
- `Access-Control-Allow-Origin` to `*` or same value as `Origin`
361
361
- ← For requests with credentials, the server should set:
362
-
- `Access-Control-Allow-Origin` to `Origin`
362
+
- `Access-Control-Allow-Origin` to same value as `Origin`
363
363
- `Access-Control-Allow-Credentials` to `true`
364
364
365
365
Additionally, if JavaScript wants to access non-simple response headers:
0 commit comments