我正在尝试使用axios在React应用中本地进行api调用。
我已经添加了django-cors-header并遵循了文档,但似乎无法正常工作。
我总是会收到错误:
localhost /:1从源'http://127.0.0.1:8000/api/todos/'对'http://localhost:3000'处XMLHttpRequest的访问已被CORS策略阻止:Access-不允许请求标头字段access-control-allow-origin飞行前响应中的Control-Allow-Headers。
我的base.py:
INSTALLED_APPS = [
# ...
"corsheaders",
"rest_framework",
"todo",
"api",
]
MIDDLEWARE = [
# ...
"corsheaders.middleware.CorsMiddleware",
"django.middleware.common.CommonMiddleware",
# ...
]
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = False
在我的应用中:
const [todos, setTodos] = useState({})
useEffect(
() => {
axios.get(
api_url, {
headers: {
"Access-Control-Allow-Origin": "*",
}
}
).then(
res => {
setTodos(res.data);
console.log(res.data)
}
).catch(
err => {
console.log(err)
}
)
}, []
)
注意,即使没有配置白名单并将CORS设置恢复为:
CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOW_CREDENTIALS = True
我仍然设法使用httpie在get调用中获取数据,只是运行http + url。
注2:当axios尝试获取数据时,我是在运行Django应用程序的终端上获取的:
[04 / Jun / 2019 18:15:29]“ OPTIONS / api / todos / HTTP / 1.1” 200 0
重要编辑: 问题似乎与服务器无关,我使用fetch代替Axios,一切正常。使用Axios,我的服务器获得了OPTIONS方法,但我不知道为什么,我使用CORS解决了这个问题。