Question

我正在尝试使用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解决了这个问题。

Axios发送选项而不是GET

0 个答案: