Как запустить django-rest-framework и реагировать на тот же домен? - PullRequest
Новая
       32

Как запустить django-rest-framework и реагировать на тот же домен?

0 голосов
/ 11 сентября 2018

Работа на веб-сайте, который использует django-rest-framework для бэкэнда и reactjs + redux для веб-интерфейса.

Теперь мой бэкэнд-сервер находится на vagrant машине с Ubuntu по URL и порту http://localhost:8080.Интерфейс использует react + redux + webpack(port 80) + cross-fetch для запроса / ответа API, сервер включен http://localhost.

Возникновение двух ошибок при запросе API с использованием cross-fetch на redux для извлечения данных.

первая ошибка: 

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 не могут использовать один и тот же порт.При запуске одного из них другой не может работать на этом порту.

Ответы [ 3 ]

0 голосов
/ 14 сентября 2018

Никакие два приложения не могут работать на одном и том же порту на одном компьютере. Подробнее об этой статье Могут ли два приложения прослушивать один и тот же порт?

Для первой проблемы просто используйте cors.js NPM на бэкэнде и с express.js, например:

server.js / app.js: 

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

const app             = express();

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

Для вашей второй проблемы: есть функция, возвращающая обратно promise, однако она не обрабатывается должным образом из вызывающей функции, или ваш promise не был resolved или rejected.

Пример 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);
});
0 голосов
/ 17 сентября 2018

Мне понравился ответ @ a_k_v: только одна строка в файле setting.py. также @NAVIN Представлен отличный пакет npm. Но для производственного уровня, основываясь на том, что люди говорят об этом в stackoverflow, я настаивал на том, чтобы у меня был один и тот же домен для 'activjs-webpack frontend' и 'django backend'. и вот мое решение для этого: я использовал веб-сервер nginx для обработки FrontEnd и BackEnd. используя UWSGI и сокет для django, и обратный прокси-сервер для веб-пакета, я наконец-то удалось запустить мой сервер без ошибок.

моя конфигурация 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.
0 голосов
/ 14 сентября 2018

Первая ошибка из-за совместного использования ресурсов между источниками. Вам необходимо настроить Cors на вашем сервере. Для этого вам нужно установить corsheaders и добавить его в INSTALLED_APPS. Затем добавьте это в ваши settings.py

CORS_ORIGIN_ALLOW_ALL = True

...