Question

正在使用django-rest-framework作为后端，reactjs + redux作为前端的网站上工作。

现在，我的后端服务器位于URL和端口vagrant上的http://localhost:8080 ubuntu计算机上。前端使用react + redux + webpack(port 80) + cross-fetch进行API请求/响应，服务器位于http://localhost上。

使用cross-fetch上的redux请求API来获取数据时遇到两个错误。

第一个错误：

Failed to load http://localhost/courses-api/all-courses/: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8000' is therefore not allowed access.

是因为端口不同吗？

第二次错误：

Uncaught (in promise) TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (browser-ponyfill.js:445)

找不到解决问题的方法。可以使用相同的端口来解决我的问题吗？在网上找到用于解决第一个错误的方法，但不能这样做，因为nodejs和django不能使用相同的端口。当运行其中一个时，另一个不能在该端口上运行。

Answer 1

第一个错误是由于跨域资源共享。您需要在服务器中配置cors。为此，您需要安装corsheaders并将其添加到INSTALLED_APPS中。然后将其添加到您的settings.py

CORS_ORIGIN_ALLOW_ALL =正确

Answer 2

我喜欢@a_k_v的回答：setting.py文件中只有一行。 @NAVIN也介绍了一个很棒的npm软件包。但是对于生产级别，基于人们在stackoverflow上的讨论，我坚持要求'reactjs-webpack frontend'和'django backend'具有相同的域。这是我的解决方案：我使用nginx Web服务器来处理FrontEnd和BackEnd。通过使用UWSGI和django的套接字，以及webpack的反向代理，终于成功地运行了我的服务器，没有任何错误。

我的nginx配置：

    server{
        listen 80;
        server_name example.com

        location /api {
                include uwsgi_params;
                uwsgi_pass unix:/home/hamidk1373/uwsgi/pythontraining.sock;
        }

        location / {
                proxy_pass http://127.0.0.1:8000;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }

我仍在使用webpack-dev-server进行开发。

如何在同一域上运行django-rest-framework并作出反应？

2 个答案: