What is CORS (cross-origin resource sharing)?

A mechanism that allows requests to other origins, and the reading of their responses, which the same-origin policy restricts, within the scope the server permits. The server uses response headers such as Access-Control-Allow-Origin to state which origins may read the response. For requests that a simple form submission cannot produce, such as a POST with Content-Type application/json, the browser first sends a check with the OPTIONS method (a preflight). It is a rule enforced by the browser, not a mechanism that protects the server from attacks.

Japanese name: CORS(オリジン間リソース共有)

CORS (cross-origin resource sharing) appears in 1 practice question across 1 topic, including Web Technology Basics.

Field: Web Technology Basics

Simple requests and preflights

GET requests and POST requests in formats a form can send (application/x-www-form-urlencoded, multipart/form-data, text/plain) are sent without a check, and Access-Control-Allow-Origin only decides whether the script may read the response. For requests with other methods or Content-Types, or with custom headers, the browser first sends OPTIONS and states the method and headers it will use in headers such as Access-Control-Request-Method. If the server returns permission, the browser sends the actual request.

Sending cookies

To send cookies with a request to another origin, the script must specify credentials and the server must return Access-Control-Allow-Credentials: true. In that case Access-Control-Allow-Origin cannot be the wildcard *, and the permitted origin must be written explicitly. Permitting too many origins risks letting other sites read the user's information.

Common misunderstandings

A CORS error means that the browser did not hand the response to the script; the request itself may already have reached the server. Also, because CORS is a rule enforced by browsers, it does not stop requests from command-line tools or other servers. To protect the server's data, authentication and permission checks are needed separately.

Try it: questions about CORS (cross-origin resource sharing)

JavaScript on a page at https://app.example.com uses fetch to send a POST request with a body of Content-Type application/json to https://api.example.net/orders. Which of the following correctly describes how CORS behaves in this case?

ACORS also works outside browsers, so without the server's permission even a POST sent from a command-line tool is stopped along the network
BThe browser first sends a preliminary check (a preflight) with the OPTIONS method, and sends the actual POST only if the server returns permission in its headers
CRequests to a different origin are always sent without any check, and the page's JavaScript can read the response even if the server adds nothing to it

Show answer and explanation

Answer: B. The browser first sends a preliminary check (a preflight) with the OPTIONS method, and sends the actual POST only if the server returns permission in its headers

CORS is a mechanism that allows requests to other origins, and the reading of their responses, which the same-origin policy restricts, within the scope the server permits. A POST with Content-Type application/json is a kind of request that a simple form submission cannot produce, so the browser first uses OPTIONS to state the method and headers it will use and asks for permission. If the server's response does not grant permission with headers such as Access-Control-Allow-Origin, the browser does not send the actual request. CORS is a rule enforced by the browser, so the server must protect itself separately with authentication and permission checks.

FAQ

Can a CORS error be fixed on the client side?

No. The server decides which origins may read its responses, so the API server must add the appropriate permission headers to its responses. For an API you do not manage, another option is to call it through your own server.

How are the same-origin policy and CORS related?

The same-origin policy in principle forbids reading responses from other origins, and CORS is the mechanism for allowing exceptions within the scope the server explicitly states. If the server returns no CORS permission, the same-origin policy's restriction applies as is.

CORS (cross-origin resource sharing) in the explanations

CORS is a mechanism that allows requests to other origins, and the reading of their responses, which the same-origin policy restricts, within the scope the server permits.
JavaScript on a page at https://app.example.com uses fetch …

Questions that mention CORS (cross-origin resource sharing) (1)

JavaScript on a page at https://app.example.com uses fetch to send a POST request with a body of Content-Type application/json to https://api.example.net/orders. Which of the following correctly describes how CORS behaves in this case?

Books on Web Technology Basics Ad

Search Amazon for semiconductor Web Technology Basics

As an Amazon Associate I earn from qualifying purchases.

Back to the glossary