跨区域印前检查期间POST请求返回401

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请求不应该需要身份验证。我也有能力在失眠中完成选项请求，没有任何问题。

这是我第一次尝试构建REST API和React应用程序。我花了很多时间试图让这个基本请求生效，我得出的结论是，我肯定遗漏了一些非常明显的东西……非常感谢您的阅读和评论。

Answer 1

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

CORS印前检查请求是一个CORS请求，它使用特定的方法和标头检查CORS协议是否被理解，以及服务器是否知道。

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

在您的情况下，这与身份验证无关，而是与从服务器接收的以下标头有关：

Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin: *

如果OPTIONS不在Allow-Methods中，你会得到一个错误，如果你的前端的主机和端口不在Allow-Origin头中，你也会得到一个错误。对于开发，可以将Allow-Origin设置为通配符(*)，但不要在生产环境中这样做。

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

//Change this to TRUE
$config['check_cors'] = TRUE;

//No change here
$config['allowed_cors_headers'] = [
  'Origin',
  'X-Requested-With',
  'Content-Type',
  'Accept',
  'Access-Control-Request-Method'
];

//No change here
$config['allowed_cors_methods'] = [
  'GET',
  'POST',
  'OPTIONS',
  'PUT',
  'PATCH',
  'DELETE'
];

//Set to TRUE to enable Cross-Origin Resource Sharing (CORS) from any source domain
$config['allow_any_cors_domain'] = TRUE;


//Used if $config['check_cors'] is set to TRUE and $config['allow_any_cors_domain'] is set to FALSE. 
//Set all the allowable domains within the array
//e.g. $config['allowed_origins'] =['http://www.example.com','https://spa.example.com']

$config['allowed_cors_origins'] = [];

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

Answer 2

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

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