来自 CORS 预检通道的 CORS 标头“Access-Control-Allow-Headers”中缺少令牌“x-auth”[重复]

Posted 2023-02-22

技术标签:

【中文标题】来自 CORS 预检通道的 CORS 标头“Access-Control-Allow-Headers”中缺少令牌“x-auth”[重复]【英文标题】：missing token ‘x-auth’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel [duplicate] 【发布时间】：2019-07-06 21:32:12 【问题描述】：

我想用 post 方法从 axios 包和 xampp 服务器获取数据，使用 firefox 时出现错误：

跨域请求被阻止：同源策略不允许读取位于http://127.0.0.1/aftab/inventory3/v1/repository/all 的远程资源。（原因：CORS 预检通道的 CORS 标头“Access-Control-Allow-Headers”中缺少令牌“x-auth”）。[了解更多] 跨域请求被阻止：同源策略不允许读取位于http://127.0.0.1/aftab/inventory3/v1/repository/all 的远程资源。（原因：CORS 请求没有成功）

但是在 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 方法请求

【问题讨论】：

似乎 Firefox 无法将 * 识别为 Access-Control-Allow-Headers 的允许值：***.com/questions/52750589/… 【参考方案1】：

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

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

并在您的服务器上启用 cors

【讨论】：

我添加了这个配置并启用了 cors 但我有同样的错误，此外我的代码在 chrome 浏览器中正常工作，这意味着我的代码和配置以及 cors 配置是正确的当我设置这个配置时，我的错误是：跨域请求被阻止：同源策略不允许读取127.0.0.1/aftab/inventory3/v1/repository/all 的远程资源。（原因：CORS 预检通道的 CORS 标头“Access-Control-Allow-Headers”中缺少令牌“access-control-allow-origin” 该问题应该通过在服务器上启用此标头和 cors 来解决，我将首先检查此相同请求是否适用于邮递员，如果是，则我将删除“Content-Type”标头或更改它到 'application/json' 并检查 x-auth 标头，因为我不确定您是否接受 x-auth 标头上的令牌在客户端添加 'Access-Control-Allow-Origin' 没有任何作用。【参考方案2】：

当我们从项目创建构建时，这在 chrome 和 firefox 中都可以正常工作，因为在构建版本的项目选项方法中不发送，我们只有 post 方法并且它适用于所有浏览器，这就像一个错误反应

【讨论】：

【参考方案3】：

我有类似的问题并检查了我的 axios 版本，它是0.18.0 POST 请求工作正常。但是，GET 请求不适用于您提到的类似问题。然后我尝试了测试版。

试试这个 axios 的 beta 版本，即0.19.0-beta.1

https://github.com/axios/axios/tree/v0.19.0-beta.1

在我的情况下它修复了。