如何让本地实例或React命中Django的本地实例

Question

我有一个本地运行的django api (djangorestframekwork，django2.1，python3.6)-- http://127.0.0.1:8000/api/cards/b361d7e2-6873-4890-8f87-702d9c89c5ad。这个api似乎工作得很好。我可以通过web api点击它，或者使用curl/request来添加或查看数据库。

现在，我希望能够让我的React项目访问此api。我可以让我的react项目访问不同的api并返回数据，但是当我用我自己的URI替换该URI时，它就会中断。

App.js -有一行被注释掉了。将其切换到其他api，以便在公共api和私有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将我带到那个特定元素的Django api页面。如果我去掉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.

我将这个api url放在前面，以解决您在访问公共cors-anywhere时看到的No Access-Control-Allow-Origin错误。由于我在访问自己的私有api时得到了相同的错误，因此我使用了相同的解决方案(例如，在我的url中添加了cors-anywhere url。

有什么想法？

Answer 1

可能是因为您没有在django rest项目中启用CORS。有一个名为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文件的末尾：

CORS_ORIGIN_ALLOW_ALL = True

在这里找到更多关于它的信息：django-cors-headers on github

Answer 2

您的keyforge.js文件可以工作，因为您正在访问一个已经托管的网站，该网站在其后端也启用了CORS。您还需要在Django后端添加CORS。从你所说的看来，你似乎只是在前端添加了它。也许像这样的东西能帮到你。

How can I enable CORS on Django REST Framework