Как сделать локальный экземпляр или React ударить локальный экземпляр Django

Question

У меня есть django api (djangorestframekwork, django2.1, python 3.6), который я запускаю локально - http://127.0.0.1:8000/api/cards/b361d7e2-6873-4890-8f87-702d9c89c5ad.Этот API, кажется, работает хорошо.Я могу подключиться к нему через веб-API или использовать curl / запросы для добавления или просмотра базы данных.

Теперь я хочу, чтобы мой проект React попал в этот API-интерфейс.Я могу сделать так, чтобы мой реагирующий проект использовал другой API, и он возвращает данные, но когда я заменяю этот URI своим собственным URI, он ломается.

App.js - закомментирована одна строка.Переключите это с другим, чтобы переключиться между публичным и частным API.

import React from 'react'
import keyforge from '../api/keyforge'
import localhost from '../api/localhost'
import SearchBar from './SearchBar'

class App extends React.Component {

    onSearchSubmit = async (term) => {    
    const response = await localhost.get("api/cards/" + term)
    //const response = await keyforge.get("api/decks/" + term)
    console.log(response)
  }

  render () {
    return (<div className='ui container'>
      <SearchBar onSubmit={this.onSearchSubmit} />
    </div>)
  }
}
export default App

keyforge.js - этот работает!

import axios from 'axios'
const proxyurl = 'https://cors-anywhere.herokuapp.com/'
const url = 'https://www.keyforgegame.com/'    
export default axios.create({
  // baseURL: 'https://www.keyforgegame.com/api/decks/'
  baseURL: proxyurl + url
})

localhost.js - этот не работает

import axios from 'axios'

const proxyurl = 'https://cors-anywhere.herokuapp.com/'
const url = 'http://127.0.0.1:8000/'

export default axios.create({
  baseURL: proxyurl + url
})

Сообщение об ошибке:

GET https://cors-anywhere.herokuapp.com/http://127.0.0.1:8000/api/cards/b361d7e2-6873-4890-8f87-702d9c89c5ad 404 (Not Found)

Uncaught (in promise) Error: Request failed with status code 404
at createError (createError.js:17)
at settle (settle.js:19)
at XMLHttpRequest.handleLoad (xhr.js:78)

На моем компьютере - http://127.0.0.1:8000/api/cards/b361d7e2-6873-4890-8f87-702d9c89c5ad переводит меня на страницу API Django для указанного элемента.Если я избавлюсь от cors-anywhere url, я получу эту ошибку -

Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/cards/b361d7e2-6873-4890-8f87-702d9c89c5ad' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

У меня есть этот cors-anywhere URL, добавленный к нему, чтобы решить ошибку No Access-Control-Allow-Origin, которую вы видите, когда я нажимаю это для публикиапи.Так как я получаю ту же ошибку, когда я нажимаю на свой собственный API, я использую то же решение (например, cors-anywhere URL, добавленный к моему URL.

Мысли?

Answer 1

Возможно, потому что вы не включили CORS в своем проекте отдыха django.Существует инструмент под названием django-cors-headers, установите его через pip install django-cors-headers, добавьте программное обеспечение и включите его в файл settings.py.

pip install django-cors-headers

затем добавьте его в установленные приложения:

INSTALLED_APPS = (
...
'corsheaders',
...
)

добавьте промежуточное ПО:

MIDDLEWARE_CLASSES = (
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
)

и, наконец, добавьте эту переменную в конце вашего settings.py file:

CORS_ORIGIN_ALLOW_ALL = True

Узнайте больше об этом здесь: django-cors-headers на github

Answer 2

Ваш файл keyforge.js работает, потому что вы заходите на уже размещенный веб-сайт, на котором также включена поддержка CORS.Вам также необходимо добавить CORS в свой бэкэнд Django.Из того, что вы сказали, кажется, что вы добавили его только в начале.Возможно, что-то подобное может помочь вам.

Как включить CORS в Django REST Framework