Question

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

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的本地主机允许来自本地主机的请求。 CORS允许example.com允许来自example.com的请求。这不是错误。

使用本地主机而不使用域的CORS错误

1 个答案: