reactjs - 来自 CORS 预检 channel 的 CORS header ‘x-auth’ 中缺少 token ‘Access-Control-Allow-Headers’

Question

我想使用post方法从axios包和xampp服务器获取数据， 我在使用 Firefox 时遇到错误:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1/aftab/inventory3/v1/repository/all. (Reason: missing token ‘x-auth’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).[Learn More] Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1/aftab/inventory3/v1/repository/all. (Reason: CORS request did not succeed)

但是当在 Chrome 中测试它时，它工作正常并且没有任何错误，

我的axios请求代码是:

let page = 1;
    let config =
        {
            'Content-Type': 'application/x-www-form-urlencoded',
            'x-auth': localStorage.getItem("token"),
        };
    let data = {page: page};
    if (localStorage.getItem("token")) {
        await axios({
            method: "post",
            url: "http://127.0.0.1/aftab/inventory3/v1/repository/all",
            data: data,
            headers: config
        }).then(function (response) {
            console.log(response);
        }).catch(function (error) {
            if (error.response) {
                cosole.log(response);
            } else if (error.request) {

               console.log(error.request);
            } else {

                console.log('Error', error.message);
            }
            console.log(error.config);
        });
    } else {
        localStorage.removeItem("token");
        // this.history.push('/log/in');
    }

在 Firefox 控制台中:

firefox console

在 Firefox 控制台网络中，仅发送了选项方法，之后我们没有任何请求，但在 chrome 中它工作正常，并且在选项方法之后我们有一个 post 方法请求

Answer 1

将您的配置更改为如下所示

let config =
        {
            'Content-Type': 'application/x-www-form-urlencoded',
            'x-auth': localStorage.getItem("token"),
            'Access-Control-Allow-Origin': '*'
        };

并在您的服务器上启用 cors