Question

我一直在寻找似乎很基本的问题的答案。我正在尝试在React框架内使用Axios在本地主机上发出跨源HTTP请求。服务器端在CodeIgniter框架上运行，并使用chriskacerguis的codeigniter-restserver。我已经配置了一个.htaccess文件，将Access-Control-Allow-Origin设置为“ *”。

我的GET请求可以正常工作。当我尝试发出POST请求时出现问题。我尝试同时使用fetch（）和Axios。我在Chrome的控制台中收到此错误消息：

OPTIONS http://localhost/api/login 401 (Unauthorized)
(...)
localhost/:1 Access to XMLHttpRequest at 'http://localhost/api/login' from origin
'http://localhost:3000' has been blocked by CORS policy: Response to preflight request
doesn't pass access control check: It does not have HTTP ok status.

我有信心服务器端代码能够正常工作，因为我能够使用Insomnia发出成功的POST请求。尽管我在许多论坛上都读到401错误与CORS问题无关，但在我看来，它必须与CORS有关，因为我的HTTP请求可以在失眠症中起作用。

经过多次尝试更改标题和不同的配置选项后，这是我在客户端上拥有的代码：

axios.post(api_url+'login', {
        headers: {
            'accept': 'application/json',
            'content-type': 'application/json',
        },
        data: {
            email: this.state.email,
            password: this.state.password
        },
        crossDomain: true,
        withCredentials: true,
        auth: {
            username: 'admin',
            password: '1234'
        }
    })
    .then(res => {
        console.log(res);
    })
    .catch(err => {
        console.log(err);
    });
}

在我看来，好像401是在初始OPTIONS请求中返回的。我不明白为什么会这样，因为我已经了解到OPTIONS请求不应要求进行身份验证。我也可以在失眠症患者中完成OPTIONS请求，而没有任何问题。

这是我首次尝试构建REST API和React应用程序。我花了很多时间试图使这个基本请求正常工作，我得出的结论是，我肯定缺少某些明显的东西……非常感谢您的阅读和评论。

Answer 1

飞行前请求实际上执行以下操作：

CORS预检请求是一种CORS请求，用于检查是否了解CORS协议，并且服务器可以使用特定的方法和标题。

来源：https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

这与您的情况下的身份验证无关，但与从服务器收到的以下标头无关：

request = Context().request

如果Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE Access-Control-Allow-Origin: *中没有OPTIONS，则会收到错误消息；如果前端的主机和端口不在Allow-Methods标头中，则会出现错误消息：也是错误的。为了进行开发，可以将Allow-Origin设置为通配符（*），但不要在生产环境中这样做。

要在codeignter中启用CORS，您必须按如下所示修改rest.php：

Allow-Origin

来源：https://stackoverflow.com/a/41206621/4934937

Answer 2

将 OPTIONS 添加到允许的方法和以下“if”对我有用：

header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
if ( "OPTIONS" === $_SERVER['REQUEST_METHOD'] ) {
    die();
}

完整答案：https://stackoverflow.com/a/25703960/6052406

跨起点预检期间POST请求返回401

2 个答案: