Question

我想使用axios包和xampp服务器中的post方法获取数据，使用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控制台网络中，仅发送了option方法，之后我们没有任何请求，但是在chrome中它可以正常工作，并且在option method之后有一个post方法请求

Answer 1

将您的配置更改为这样

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

并在服务器上启用cors

Answer 2

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

Answer 3

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

尝试使用此beta版本的axios，即0.19.0-beta.1

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

我的情况已解决。

 "axios": "0.19.0-beta.1"

注意：如果您打算使用测试版。我希望它能工作。

在CORS预检频道的CORS标头“ Access-Control-Allow-Headers”中缺少令牌“ x-auth”

3 个答案: