使用 localhost 但未使用域的 CORS 错误

Question

我正在开发一个通过 axios 与 DRF 后端通信的反应网络应用程序。在本地开发时，我通过安装 django-cors-headers 并将 localhost:3000 添加到 CORS_ORIGIN_WHITELIST 来处理 CORS（3000 是 react w/create-react-app 的默认端口）：

CORS_ORIGIN_WHITELIST = (
    'localhost:3000',
)

这一直很好，直到我部署到远程服务器，突然又开始看到 CORS 错误：

Access to XMLHttpRequest at 'http://localhost:8000/api/path/' from 
origin 'http://example.com:3000' has been blocked by CORS policy...

这让我感到莫名其妙，因为当我在本地开发时它已经工作了。

这让我困惑了好几个小时，直到完全沮丧让我改变了响应请求

axios.post(localhost:8000/api/path/, {                                          
    key1: val1,                                      
    key2: val2,                                          
    ...                                        
})
.then(response => {
    doSomeStuff(response);
});

到

axios.post(example.com:8000/api/path/, {                                          
    key1: val1,                                      
    key2: val2,                                          
    ...                                        
})
.then(response => {
    doSomeStuff(response);
});

以及来自

的白名单

CORS_ORIGIN_WHITELIST = (
    'localhost:3000',
)

到

CORS_ORIGIN_WHITELIST = (
    'example.com:3000',
)

此时 CORS 错误停止。

我的问题是：为什么会这样？我的理解是 localhost 和 example.com 是同一服务器的两个名称，但是将 localhost/example.com 列入白名单和请求 localhost/example.com 的所有其他组合都会导致错误。从 CORS 的角度来看有什么区别？

Answer 1

localhost 和 example.com 不是同一服务器的两个名称。 localhost 解析为127.0.0.1，一个本地地址，即服务器在您的计算机内部。 example.com 解析为远程服务器。

允许 CORS 的 localhost 允许来自 localhost 的请求。允许 CORS 的 example.com 允许来自 example.com 的请求。这不是错误。