使用Axios访问第三方API时出现错误,但fetch()完成了这项工作

zz2j4svz  于 2023-02-12  发布在  iOS
关注(0)|答案(1)|浏览(188)

最近,我想使用Axios从第三方API获取数据,但遇到了CORS错误,所以我决定改用fetch()
下面是代码。使用fetch()的函数:

// function that uses fetch()
export default async function () {
    let ipData = await fetch(
        'https://api.ipdata.co/?api-key=<key>'
    );
    let parsedIpData = await ipData.json();
    console.log(parsedIpData);
    if (parsedIpData && parsedIpData.languages) {
        parsedIpData.languages.forEach((lang) => {
            if (lang.code == 'en' || lang.code == 'ru') {
                console.log('lang.code - ' + lang.code);
                return lang.code;
            } else {
                console.log('fallback locale - en');
                return 'en';
            }
        })
    } else {
        console.log('no response. fallback locale - en');
        return 'en';
    }
}

使用Axios的函数:

// function that uses Axios
export default async function () {
    axios.get(
        'https://api.ipdata.co/?api-key=<key>'
    ).then((response) => {
        if (response && response.languages) {
            response.languages.forEach((lang) => {
                if (lang.code == 'en' || lang.code == 'ru') {
                    console.log('lang.code - ' + lang.code);
                    return lang.code;
                } else {
                    console.log('fallback locale - en');
                    return 'en';
                }
            })
        } else {
            console.log('no response. fallback locale - en');
            return 'en';
        }
    }).catch((error) => {
        console.log(error);
    })
}

这是我的错误。我已经尝试过将头文件传递给axios.get(),但是服务器不允许。

zpjtge22

zpjtge221#

原来Axios总是发送带有X-Requested-With头的请求,但服务器不允许这样做,请看下面的截图来确认。

所以我决定把null赋值给X-Requested-With头文件。我不确定这样做是否正确,所以,如果你愿意,请随时告诉我这一点。下面是axios.get()现在的样子:

axios.get(
    'https://api.ipdata.co/?api-key=<key>', {
        headers: {
            'X-Requested-With': null
        }
    }
).then((response) => {
    if (response.data && response.data.languages) {
        console.log(response.data.languages);
        response.data.languages.forEach((lang) => {
            if (lang.code == 'en' || lang.code == 'ru') {
                console.log('lang.code - ' + lang.code);
                return lang.code;
            } else {
                console.log('fallback locale - en');
                return 'en';
            }
        })
    } else {
        console.log(response);
        console.log('no response. fallback locale - en');
        return 'en';
    }
}).catch((error) => {
    console.log(error);
})

成功了!我很高兴!谢谢你们,各位,引导我找到了这个答案!
P.S.:This thread帮助我理解了Axios和其他库将X-Requested-With包含在请求头中的原因。

相关问题