Django和React托管在同一服务器上的CORS问题

我的Django Rest框架和React应用程序在同一台服务器上出现CORS问题。我在运行Vagrant，安装了Ubuntu18盒和NGINX（我假设这个问题会转化为DigitalOcean），如果我提供的信息太多，我会提前道歉。DRF正在使用Supervisor，Gunicorn在端口8000上。我使用CreateReact应用程序创建了我的React应用程序。然后我使用

npm run build

创建静态文件

NGINX设置：

INSTALLED_APPS = [
    ...
    'rest_framework',
    'corsheaders',
    'myapp',
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

反应形态

server {
    listen 8080;
    server_name sandbox.dev;

    root /var/sites/sandbox/frontend/build;
    index index.html;
    client_max_body_size 4G;
    location / {
        try_files $uri $uri/ /index.html;
    }

Django形态

upstream sandbox_server {
    server unix:/var/tmp/gunicorn_sanbox.sock fail_timeout=0;
}
server {
    listen 8000;
    server_name api.sandbox.dev;
    ...
    location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    if (!-f $request_filename) {
        proxy_pass http://sandbox_server;
        break;
    }

Django设置：

INSTALLED_APPS = [
    ...
    'rest_framework',
    'corsheaders',
    'myapp',
]
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

我尝试了以下方法，但没有成功

CORS_ORIGIN_ALLOW_ALL = True

及

React App.js

...
fetch("http://localhost:8000/api/v1/token-auth/", {
    method: 'POST',
    headers: {
       'Content-Type': 'application/json',
    },
    body: JSON.stringify({"email":"test@user.com", "password":"testuser"}),
})

因此，声明明显的CORS是正确的，因为源是localhost:8080，这是一个不同的端口，因此它将其视为跨源。我尝试过cors origin allow的不同设置，但每次都是相同的问题。显然我做错了什么，但我看不出来

我的想法是

选择1

使用django nginx conf文件进行代理传递，并删除react nginx conf文件，但我不知道这可能会对生产造成什么影响，或者这是一个好主意。有更好的办法吗

location /api {
    proxy_set_header X-Forwarded_for $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://sandbox_server;

最后确定我的想法和问题。在尝试了CORS的不同Django选项后，我仍然得到CORS错误。为什么，是我的NGINX conf文件导致的还是其他原因？我会在数码海洋看到这一切吗

更新1

我忘了添加错误。这是CORS错误

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/v1/token-auth/. (Reason: CORS request did not succeed).

对于希望了解网络选项卡输出的用户

Host    localhost:8000
Origin  http://192.168.19.76:8080
Pragma  no-cache
Referer http://192.168.19.76:8080/

更新2 我使用curl进行了测试，所有结果都按预期返回，所以我知道DRF工作正常

curl --data "email=test@user.com&password=testuser" http://localhost:8000/api/v1/token-auth/

最终更新

感谢paulsm4的所有帮助和令人敬畏的表现

所以，我确实放弃了django cors头球，并推出了自己的头球。为了回答paulsm4的问题，我没有

add_头“Access Control Allow Origin”*
    location /api {
        proxy_set_header X-Forwarded_For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://sandbox_server;

上面的代码本身是有效的，但它不允许我将任何传入的URL列入白名单。通过创建自己的中间件，我可以创建白名单。我不知道为什么django cors头或者甚至django cors中间件对我不起作用。奇怪的是，fetch在这两个包中始终没有得到足够的响应头和任何类型的错误，除了我所问的CORS错误。使用我编写的中间件，fetch能够完全进行调用，并返回一些响应头，无论它成功还是失败

作为将来的参考，我可能会重新访问NGINX并允许它处理CORS。这里有一个很好的链接

注意

澄清；除了Django已经包含的中间件之外，唯一安装的中间件是cors中间件。Django和React都位于同一台服务器上，但具有不同的端口

8000是Django Rest框架
app.sandbox.com:8080是静态文件
Django 2.0.2
Python 3.6
django cors headers 2.4.0
Vagrant/VirtualBox Ubuntu 18.04
NGINX
Django settings.py

INSTALLED_APPS = [
    ...
    # Third Party
    'rest_framework',
    'corsheaders',
    # My Apps
    'account',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
    'django.middleware.csrf.CsrfViewMiddleware',
    'corsheaders.middleware.CorsPostCsrfMiddleware',
    ...
]
CORS_ORIGIN_WHITELIST = (
    'null',
    '192.168.19.76:8080',
    'localhost:8080',
    'app.sandbox.com:8080'
)

React App.js

    fetch("http://localhost:8000/api/v1/token-auth/", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            "email": "test@user.com", 
            "password": "testuser"
       }),
    })

所以我在这里束手无策。要么是django cors标头不起作用，要么可能是NGINX
 我们一直在交换意见；以下是我目前的理解：

问题：您有一个Django后端API（在端口8080上）和一个React前端（在端口8000上）。两者目前都在本地主机上运行，但最终将驻留在DigitalOcean上。React客户端正在阻止跨源请求：同一源策略不允许读取远程资源http://localhost:8000/api/v1/token-auth/。（原因：CORS请求未成功）。

您需要配置CORS

您捕获的HTTP流量中的请求头清楚地表明这还没有发生

一些相关链接包括：

建议下一步：

---

如果您还没有，请安装并配置

这在DigitalOcean上会是相同的问题吗？问：您可以用1）确切的错误消息，2）Django实际返回的HTTP头更新您的帖子吗？另请参见：、和。@palsm4我更新了帖子以包含错误。对不起，我完全忘了添加它。@paulsm4谢谢你的链接。不幸的是，这些都在我最后发布到这里寻求帮助之前查阅的链接列表中。请用CORS.header复制/粘贴响应标题。它可能如下所示：

Access Control Allow Origin:http://localhost:4200

。如果你没有看到它。。。这就是问题所在；）问：您的8000端口上到底有什么？在你的8080端口？谢谢你的帮助。如果您查看我在Django设置下的原始帖子，您将看到我已经安装并配置了Django cors头文件。这就是为什么我对它不起作用感到困惑的原因。这个版本是django cors headers的最新版本，是2.4.0Q：运气好吗？如果其他方法都失败了，我会1）专注于API:Django和Django cors头，2）打开最大跟踪/调试日志记录：，3）使用尽可能少的中间件创建最小的Django/React“hello world”（理想情况下，只从“Django cors头”开始），然后一次添加一个，直到cors再次“中断”（假设你能从一开始就让它工作。）不走运。是的，我正在运行一个基本的项目，所有的东西都是最少的。django cors headers绝对拒绝工作。我在原始帖子中添加了一条注释，因为每个人都没有读过它yetDrag-听到这个消息我非常非常抱歉。建议