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 / requests添加或查看数据库。

现在，我希望能够使我的React项目命中此api。我可以让我的react项目命中一个不同的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将我带到该特定元素的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网址作为前缀，以解决我在公共api上遇到此错误时遇到的No Access-Control-Allow-Origin错误。由于我在使用自己的私有api时遇到了相同的错误，因此我使用的是相同的解决方案（例如，在网址前附加了cors-anywhere网址。

有想法吗？

Answer 1

您的keyforge.js文件起作用是因为您访问的是已经托管的网站，该网站的后端也启用了CORS。您还需要在Django后端添加CORS。从您所说的看来，您似乎只是在前端添加了它。可能会帮助您。

How can I enable CORS on Django REST Framework

Answer 2

可能是因为您未在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

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

2 个答案: