# CORS (Cross-Origin Resource Sharing) { #cors-cross-origin-resource-sharing }

[CORS or "Cross-Origin Resource Sharing"](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) refers to the situations when a frontend running in a browser has JavaScript code that communicates with a backend, and the backend is in a different "origin" than the frontend.

## Origin { #origin }

# CORS (Cross-Origin Resource Sharing) { #cors-cross-origin-resource-sharing }

[CORSまたは「Cross-Origin Resource Sharing」](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) は、ブラウザで実行されているフロントエンドにバックエンドと通信するJavaScriptコードがあり、そのバックエンドがフロントエンドとは異なる「オリジン」にある状況を指します。

## オリジン { #origin }

オリジンはプロトコル (`http`、`https`) とドメイン (`myapp.com`、`localhost`、`localhost.tiangolo.com`) とポート (`80`、`443`、`8080`) の組み合わせです。

したがって、以下はすべて異なるオリジンです:

* `http://localhost`

But if you have custom headers that you want a client in a browser to be able to see, you need to add them to your CORS configurations ([CORS (Cross-Origin Resource Sharing)](cors.md)) using the parameter `expose_headers` documented in [Starlette's CORS docs](https://www.starlette.dev/middleware/#corsmiddleware).

///

/// note | Technical Details

# CORS（跨來源資源共用） { #cors-cross-origin-resource-sharing }

[CORS 或「Cross-Origin Resource Sharing」](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)指的是：當在瀏覽器中執行的前端以 JavaScript 與後端通訊，而後端與前端位於不同「來源（origin）」時的情境。

## 來源（Origin） { #origin }

一個來源是由通訊協定（`http`、`https`）、網域（`myapp.com`、`localhost`、`localhost.tiangolo.com`）與連接埠（`80`、`443`、`8080`）三者組合而成。

因此，以下皆是不同的來源：

* `http://localhost`
* `https://localhost`
* `http://localhost:8080`

# CORS（跨域资源共享） { #cors-cross-origin-resource-sharing }

[CORS 或者「跨域资源共享」](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) 指浏览器中运行的前端拥有与后端通信的 JavaScript 代码，而后端处于与前端不同的「源」的情况。

## 源 { #origin }

源是协议（`http`，`https`）、域（`myapp.com`，`localhost`，`localhost.tiangolo.com`）以及端口（`80`、`443`、`8080`）的组合。

因此，这些都是不同的源：

* `http://localhost`
* `https://localhost`
* `http://localhost:8080`

即使它们都在 `localhost` 中，但是它们使用不同的协议或者端口，所以它们都是不同的「源」。

/// tip | 豆知識

カスタムの独自ヘッダーは [`X-` プレフィックスを使用](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers)して追加できる点に注意してください。

ただし、ブラウザのクライアントに表示させたいカスタムヘッダーがある場合は、[CORS (Cross-Origin Resource Sharing)](cors.md) の設定に、[StarletteのCORSドキュメント](https://www.starlette.dev/middleware/#corsmiddleware)に記載されているパラメータ `expose_headers` を使用して、それらを追加する必要があります。

///

/// note | 技術詳細

prefix](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers).

But if you have custom headers that you want a client in a browser to be able to see, you need to add them to your CORS configurations (read more in [CORS (Cross-Origin Resource Sharing)](../tutorial/cors.md)), using the parameter `expose_headers` documented in [Starlette's CORS docs](https://www.starlette.dev/middleware/#corsmiddleware)....

For internal purposes, we use binary formats for their brevity.
We use the `Serializer` abstraction to separate the actual implementation of serialization from its uses.

When sharing data with external tools, we use JSON.

## Consequences

* The configuration cache serialization infrastructure should be used for all serialization.

This is a general purpose platform that builds on the core automation platform to add support for the automation of software development.
This includes work such as compiling, testing and documenting software, plus sharing that software via publishing and dependency management.
This platform is agnostic to what kind of software is being developed.

這種堆疊行為可確保中介軟體以可預期且可控制的順序執行。

## 其他中介軟體 { #other-middlewares }

你之後可以在[進階使用者指南：進階中介軟體](../advanced/middleware.md)閱讀更多關於其他中介軟體的內容。