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
Now the browser can see that `PATCH` is in the list of allowed methods, and both headers are in the list too, so it sends out the main request.
276
+
Now the browser can see that `PATCH` 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.
277
277
278
-
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 allowances, they will be sent directly.
278
+
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.
279
279
280
280
### Step 3 (actual request)
281
281
282
-
When the preflight is successful, the browser now makes the real request. Here the flow is the same as for simple requests.
282
+
When the preflight is successful, the browser now makes the main request. The algorithm here is the same as for simple requests.
283
283
284
-
The real request has `Origin` header (because it's cross-origin):
284
+
The main request has `Origin` header (because it's cross-origin):
Now everything's correct. JavaScript is able to read the full response.
302
+
Then JavaScript is able to read the main server response.
303
303
304
+
```smart
305
+
Preflight request occurs "behind the scenes", it's invisible to JavaScript.
306
+
307
+
JavaScript only gets the response to the main request or an error if there's no server permission.
308
+
```
304
309
305
310
## Credentials
306
311
307
312
A cross-origin request by default does not bring any credentials (cookies or HTTP authentication).
308
313
309
314
That's uncommon for HTTP-requests. Usually, a request to `http://site.com` is accompanied by all cookies from that domain. But cross-origin requests made by JavaScript methods are an exception.
310
315
311
-
For example, `fetch('http://another.com')` does not send any cookies, even those that belong to `another.com` domain.
316
+
For example, `fetch('http://another.com')` does not send any cookies, even those (!) that belong to `another.com` domain.
312
317
313
318
Why?
314
319
315
-
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.
320
+
That's because a request with credentials gives much more powerful than without them. If allowed, it grants JavaScript the full power to act on behalf of the user and access sensitive information using their credentials.
316
321
317
-
Does the server really trust pages from `Origin` that much? Then it must explicitly allow requests with credentials with an additional header.
322
+
Does the server really trust the script that much? Then it must explicitly allow requests with credentials with an additional header.
318
323
319
-
To send credentials, we need to add the option `credentials: "include"`, like this:
324
+
To send credentials in `fetch`, we need to add the option `credentials: "include"`, like this:
Now `fetch` sends cookies originating from `another.com` with out request to that site.
328
333
329
-
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`.
334
+
If the server agrees 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`.
Please note: `Access-Control-Allow-Origin` is prohibited from using a star `*` for requests with credentials. There must be exactly the origin there, like above. That's an additional safety measure, to ensure that the server really knows who it trusts.
340
-
344
+
Please note: `Access-Control-Allow-Origin` is prohibited from using a star `*` for requests with credentials. There must be exactly the origin there, like above. That's an additional safety measure, to ensure that the server really knows who it trusts to make such requests.
341
345
342
346
## Summary
343
347
344
-
Networking methods split cross-origin requests into two kinds: "simple" and all the others.
348
+
From the browser point of view, there are to kinds of cross-origin requests: "simple" and all the others.
345
349
346
350
[Simple requests](http://www.w3.org/TR/cors/#terminology) must satisfy the following conditions:
347
351
- Method: GET, POST or HEAD.
@@ -353,7 +357,7 @@ Networking methods split cross-origin requests into two kinds: "simple" and all
353
357
354
358
The essential difference is that simple requests were doable since ancient times using `<form>` or `<script>` tags, while non-simple were impossible for browsers for a long time.
355
359
356
-
So, practical difference is that simple requests are sent right away, with `Origin` header, but for other ones the browser makes a preliminary "preflight" request, asking for permission.
360
+
So, the practical difference is that simple requests are sent right away, with `Origin` header, while for the other ones the browser makes a preliminary "preflight" request, asking for permission.
357
361
358
362
**For simple requests:**
359
363
@@ -364,21 +368,13 @@ So, practical difference is that simple requests are sent right away, with `Orig
364
368
- `Access-Control-Allow-Origin` to same value as `Origin`
365
369
- `Access-Control-Allow-Credentials` to `true`
366
370
367
-
Additionally, if JavaScript wants to access non-simple response headers:
368
-
- `Cache-Control`
369
-
- `Content-Language`
370
-
- `Content-Type`
371
-
- `Expires`
372
-
- `Last-Modified`
373
-
- `Pragma`
374
-
375
-
...Then the server should list the allowed ones in `Access-Control-Expose-Headers` header.
371
+
Additionally, to grant JavaScript access to any response headers except `Cache-Control`, `Content-Language`, `Content-Type`, `Expires`, `Last-Modified` or `Pragma`, the server should list the allowed ones in `Access-Control-Expose-Headers` header.
376
372
377
373
**For non-simple requests, a preliminary "preflight" request is issued before the requested one:**
378
374
379
375
- → The browser sends `OPTIONS` request to the same url, with headers:
380
376
- `Access-Control-Request-Method` has requested method.
0 commit comments