How to run django-rest-framework and react on the same domain?

Question

Working on a website that uses django-rest-framework for the backend and reactjs + redux for the frontend.

Now my backend server is on a vagrant ubuntu machine on URL and port http://localhost:8080. Frontend using react + redux + webpack(port 80) + cross-fetch for API request/response, server is on http://localhost.

Facing two errors, when requesting an API using cross-fetch on redux for fetching data.

first error:

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.

Is it because of the different ports?

second error:

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

Can not find out a way to solve the problem. Will using the same port for both solve my problem?. Found on the web for solving the first error, but can't do that as nodejs and django can not use the same port. When running one of them the other one cannot run on that port.

Answer 1

I liked @a_k_v's answer: just one line in setting.py file. also @NAVIN Introduced a great npm package. But for production level , based on people's talking about it on stackoverflow, I insisted on having the same domain for both 'reactjs-webpack frontend' and 'django backend'. and here is my solution for that : I used nginx web server for handling both FrontEnd and BackEnd. by using UWSGI and a socket for django , and a Reverse proxy for webpack , I finally managed to run my server without any error.

my nginx configuration :

    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;
        }
    }

• I'm still in development mode using webpack-dev-server.

Answer 2

The first error because of cross-origin resource sharing. You need to configure cors in your server. To do so you need to install corsheaders and add it into INSTALLED_APPS. Then add this to your settings.py

CORS_ORIGIN_ALLOW_ALL = True

Answer 3

No two application can run on same port at same machine. Ream more on this article Can two applications listen to the same port?

For your first problem just use cors.js NPM on backend and with express.js like:

server.js / app.js:

const CORS            = require('cors'),
      express         = require('express');

const app             = express();

// Cross-Origin Resource Sharing
app.use(CORS());

For your Second problem: There's a function returning back promise however is not handled properly from calling function or your promise is not been resolved or rejected.

Example JS:

function doSomethingAsync () {
    return new Promise ( (resolve, reject) => {
        // Just to simulate asynchronous functions using setTimeout()
        setTimeout( ()=> {
            // Doing asynchronous work like File read/write, database calls, API call, any other async.

            // If not resolve/reject function are not called then uncaught in promise error will come. Thus always call these functions.

           if('some condition is true') {
               resolve('Return success message here');
           } else {
               reject('Return your error here');
           }
        },10000);
    });
}

doSomethingAsync()
.then( result => {
    console.log('If promise resolved then here: ', result);
})
.catch( err => {
    console.log('If promise rejected then here: ', err);
});