如何让本地实例或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似乎运作良好。我可以通过web api点击它或使用curl / requests添加或查看数据库。

现在，我希望能够让我的React项目达到这个API。我可以让我的react项目命中一个不同的API并返回数据，但是当我用自己的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带我到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.

我有这个cors-anywhere网址前面的解决No Access-Control-Allow-Origin错误，你看到我看到公共api时。因为当我点击我自己的私人api时遇到同样的错误，我使用相同的解决方案（例如，cors-anywhere网址预先加入我的网址。

思考？

Answer 1

可能是因为你没有在你的django休息项目上启用CORS。有一个名为django-cors-headers的工具，通过pip install django-cors-headers安装它，添加它的midlleware并在你的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