Javascript CORS - 它是客户端的东西，服务器端的东西还是传输级别的东西？

CORS - Is it a client-side thing, a server-side thing, or a transport level thing?

提问by Some User

I am trying to understand CORS. From my understanding, it empowers you to limit which domains can access a resource on your server. However, this doesn't seem like the full story. For example, I have a web service without CORS enabled. I cannot hit this web service from my web application via jQuery (the app is running on localhost). However, I can hit the web service from Postman. So, I'm a bit confused. Is there some extra client side work that involves CORS?

我正在尝试了解CORS。根据我的理解，它使您能够限制哪些域可以访问您服务器上的资源。然而，这似乎不是完整的故事。例如，我有一个没有启用 CORS 的 Web 服务。我无法通过 jQuery 从我的 Web 应用程序访问此 Web 服务（该应用程序在 localhost 上运行）。但是，我可以从 Postman 访问 Web 服务。所以，我有点困惑。是否有一些额外的客户端工作涉及 CORS？

回答by Matt Champion

The server is responsible for reporting the allowed origins. The web browser is responsible for enforcing that requests are only sent from allowed domains.

服务器负责报告允许的来源。Web 浏览器负责强制要求仅从允许的域发送请求。

CORSis applied to requests when an Origin headeris included in the request. This includes requests made from JavaScript and POST requests. It's not applied all resources. The origin is the protocol, host and port that is making the request. Requests made by JavaScript use the origin that loaded the JavaScript, not the origin that it was loaded from.

当请求中包含Origin 标头时，CORS应用于请求。这包括从 JavaScript 和 POST 请求发出的请求。它并未应用所有资源。源是发出请求的协议、主机和端口。JavaScript 发出的请求使用加载 JavaScript 的源，而不是加载它的源。

When CORS is not enabled a browser will rely on the same origin policy. The same origin policy is only applied to scripts. The browser will only allow scripts to be loaded from same origin as the loaded page. The same origin policy is assumed when not origins are explicitly allowed.

当未启用 CORS 时，浏览器将依赖同源策略。同源策略仅适用于脚本。浏览器将只允许从与加载页面相同的来源加载脚本。当明确允许不来源时，假定相同来源策略。

An HTTP client other than a browser won't use either the same origin policy or CORS. Requests made from these other HTTP clients don't have an origin. Unless the Postman desktop app emulates a browser it will be able to make requests to any URL.

浏览器以外的 HTTP 客户端不会使用同源策略或 CORS。从这些其他 HTTP 客户端发出的请求没有来源。除非 Postman 桌面应用程序模拟浏览器，否则它可以向任何 URL 发出请求。

CORS and the same origin policy are needed because a browser does not implicitly trust the websites it visits to make requests to other websites. They don't protect the origin site, they protect the site receiving the cross origin requests. This is why the allowed origins are up to the targeted server.

需要 CORS 和同源策略是因为浏览器不会隐式信任它访问的网站以向其他网站发出请求。它们不保护源站点，它们保护接收跨源请求的站点。这就是为什么允许的来源取决于目标服务器。

Without these policies a simple script that repeatedly loads a website could be distributed by ad networks or script injection and then any browser loading the script would contribute to a denial of service attack on the website. With CORS and the same origin policy a browser will limit the impact of this script.

如果没有这些策略，重复加载网站的简单脚本可能会通过广告网络或脚本注入进行分发，然后任何加载该脚本的浏览器都会导致对网站的拒绝服务攻击。使用 CORS 和同源策略，浏览器将限制此脚本的影响。

Another important protection CORS provides is to protect against Cross-site request forgery. It prevents a site from making some types of requests to another site. These requests would be made using any previously created tokens, such as session tokens.

CORS 提供的另一个重要保护是防止跨站点请求伪造。它可以防止站点向另一个站点发出某些类型的请求。这些请求将使用任何先前创建的令牌（例如会话令牌）进行。

CORS by example:

CORS 举例：

A web browser loads a page from www.example.com. The page includes a script that makes a request to www.example.org. The origin of the request is www.example.com. The browser either makes the request or sends an OPTIONSrequest first (the preflight request). When the server at www.example.orgreceives a request from an origin other than www.example.orgit responds with a response header Access-Control-Allow-Originwhich tells the browser the origins allowed to make requests. It may also respond with other headers like Access-Control-Allow-Methodsand Access-Control-Allow-Headersthat can restrict the types of allowed requests. When the browser is told what origins are allowed it will block future requests from disallowed origins.

Web 浏览器从 加载页面www.example.com。该页面包含一个向 发出请求的脚本www.example.org。请求的来源是www.example.com。浏览器要么发出请求，要么OPTIONS首先发送请求（预检请求）。当服务器www.example.org收到来自其他来源的请求时，www.example.org它会使用响应标头Access-Control-Allow-Origin进行响应，该标头告诉浏览器允许发出请求的来源。它也可以与其他标题等回答Access-Control-Allow-Methods，并Access-Control-Allow-Headers能限制类型允许的请求。当浏览器被告知允许哪些来源时，它将阻止来自不允许的来源的未来请求。

回答by John Mc

It's a bit of both actually. Your browser will prevent CORS requests unless the origin of the request (i.e the referrer URL domain) is in a white list on the destination, or the destination approves all requests regardless of origin.

实际上两者兼而有之。您的浏览器将阻止 CORS 请求，除非请求的来源（即引用 URL 域）在目的地的白名单中，或者目的地批准所有请求，无论来源如何。

In both cases, the required header (Access-Control-Allow-Origin) is added which tells the browser that it's ok to send the request to the destination.

在这两种情况下，都添加了所需的标头 (Access-Control-Allow-Origin)，它告诉浏览器可以将请求发送到目的地。

This ensures that people with malicious intent cannot send requests to another domain without the the user knowing about it.

这可确保怀有恶意的人无法在用户不知情的情况下将请求发送到另一个域。