如何调试任何 CORS 问题

CORS 问题最好使用 Google Chrome 调试，因为它提供了有用的错误信息。 在发生 CORS 失败时，控制台会打印一条错误信息，解释为什么请求被阻止：

🌐 A CORS issue is best debugged with Google Chrome because of the useful error messages.
Upon a CORS failure, an error message is printed to the console, explaining why the request has been blocked:

Access to fetch at 'https://google.com/' from origin 'https://remotion.dev' has been blocked by CORS policy:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

调试 CORS 错误的秘诀是仔细阅读错误信息。

在这种情况下，Access-Control-Allow-Origin 头缺失。
你可以通过从你的服务器发送以下头来解决此错误：

🌐 In this case, the Access-Control-Allow-Origin header is missing.
You can resolve the error by sending the following header from your server:

• Access-Control-Allow-Origin: *

在其他情况下，错误信息可能会不同！

🌐 In other scenarios, the error message might be different!

注意预检请求

🌐 Watch out for Preflight requests

Access to fetch at 'http://localhost:3005/' from origin 'http://localhost:3001' has been blocked by CORS policy:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

对于某些 HTTP 方法，浏览器会先发送一个使用方法 OPTIONS 的请求。这称为预检请求。

🌐 For some HTTP methods, the browser will send a request with the method OPTIONS first.
This is called a preflight request.

HTTP 方法	选项请求已发送？
去，头	不
后期	有时候*
放置、删除、修补、选项	是的

当 POST 请求发送预检请求时

POST 请求不会触发预检请求，除非它们包含自定义头或 Content-Type 不是 application/x-www-form-urlencoded、multipart/form-data 或 text/plain。

常见问题：为 POST 请求添加 Content-Type: application/json 头会导致触发预检请求！

解决这些错误的方法是在对 OPTIONS 请求的响应中也返回 CORS 头。

🌐 The solution for these errors is to also return the CORS headers in the response to the OPTIONS request.

注意错误信息是如何明确提到“预检请求”的！

🌐 Notice how the error message explicitly mentions the "preflight request"!

设置 Access-Control-Allow-Methods 头

🌐 Set the Access-Control-Allow-Methods header

Access to fetch at 'http://localhost:3005/' from origin 'http://localhost:3001' has been blocked by CORS policy:

Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

如果正在进行预检请求，则响应还必须包含Access-Control-Allow-Methods头。

🌐 If a preflight request is happening, the response also must include the Access-Control-Allow-Methods header.

将以下标题添加到响应中：

🌐 Add the following header to the response:

Access-Control-Allow-Methods: *

如果你打算使用除 GET、HEAD 或 POST 以外的 HTTP 方法，你应始终添加 Access-Control-Allow-Methods 头。

🌐 If you intend to use HTTP methods other than GET, HEAD or POST, you should always add the Access-Control-Allow-Methods header.

再次注意，错误消息非常具体！

🌐 Again, notice that the error message was very specific!

请求本地主机 URL

🌐 Requesting localhost URLs

有时无法发出请求并不是因为互联网上的网站请求了一个 localhost URL：

🌐 Sometimes a request cannot be made not because a website on the internet requests a localhost URL:

Access to fetch at 'http://localhost:3005/' from origin 'https://www.remotion.dev' has been blocked by CORS policy:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Private-Network' header was present in the preflight response for this private network request targeting the "local" address space.

这个问题可以通过在响应中添加 Access-Control-Allow-Private-Network 头来解决：

🌐 This issue can be solved by adding the Access-Control-Allow-Private-Network header to the response:

• Access-Control-Allow-Private-Network: true

问题的解决方法再次出现在错误信息中。

🌐 Once again, the resolution for the problem was described in the error message.

解决任何CORS错误

🌐 Solving any CORS error

还有更多的标题可能会发挥作用：

🌐 There are more headers which can come into play:

• Access-Control-Allow-Origin
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers
• Access-Control-Allow-Credentials
• Access-Control-Allow-Private-Network
• Access-Control-Expose-Headers
• Access-Control-Max-Age

无论问题是什么，Chrome 在控制台打印的错误信息都非常具体。
很容易不仔细查看它，因为前半部分总是相同的，但后半部分才是与问题相关的具体内容。
仔细阅读错误信息，并采取相应的措施。

🌐 Whatever the issue, the error message that Chrome prints to the console is very specific.
It's easy to not inspect it closely because the first part is always the same, but the second part is the one that is specific to the issue.
Read the error message carefully and act appropriately.

禁用缓存

🌐 Disable the cache

如果一切都不合理，也许是缓存问题！ 打开 Chrome 开发者工具，在“网络”选项卡中，勾选“禁用缓存”。

🌐 If nothing makes sense, maybe it is a cache issue!
Open the Chrome DevTools and in the Network tab, check "Disable cache".