时间戳

首页 > 解决方案 > Vue.js Fetch 抛出 404 和 api 响应

javascript - Vue.js Fetch 抛出 404 和 api 响应

问题描述

我无法在 Vue.js 中发出 POST 请求。它给了我 CORS 问题，但我补充说

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");

到 API，他们就走了。我可以使用 Postman 从 API 获得有效响应，同时使用相同的电子邮件和密码（Postman 忽略 CORS）。

这是我的获取请求：

<script>
export default {
data () {
    return {}
},
methods : {
    login : function () {
        console.log('Logging in');
        // axios({
        //     method : 'post',
        //     url : 'https://www.example.com/login',
        //     headers : {'content' : 'application/json'},
        //     data : {
        //         email : 'emailHere',
        //         password : 'passwordHere'
        //     }
        // })
        // .then(function (response) {
        //     console.log(response);
        // })
        // .catch(function (error) {
        //     console.log(error);
        // });

        fetch('https://www.example.com/login', {
            method: 'POST',
            body: JSON.stringify({
                email : 'emailHere',
                password : 'passwordHere'
            })
        })
        .then((res) => res.json())
        .then((data) => console.log(data))
        .catch((err) => console.error(err))

    }
}
}
</script>

https://www.example.com/api/v1/authenticate/login 404 (Not Found)
{status: false, message: "Invalid credentials"}

我尝试了 Axios，仍然给我 404，但不是“无效凭据”响应。

在其他应用程序中，我已成功使用 jquery ajax 与相同的 API，因此 API 似乎允许 javascript 请求。但是 Fetch 和 Axios 不喜欢它。

我有一个带有按钮的 Login.vue 组件

<a id="login-btn" @click.prevent="login">{{ $t('loginPage.loginButtonText') }}</a>

任何帮助，将不胜感激！谢谢！

标签： javascriptvue.js

解决方案

您缺少Content-Type标题。尝试在您的请求中设置标题。Fetch要求您明确设置标头，因为它是一个低级 API。您的服务器可能会拒绝，因为它无法识别出合适Content-Type的 . 尝试这个：

fetch('https://www.example.com/login', {
    method: 'POST',

    // THIS IS IMPORTANT
    headers: new Headers({
         'Content-Type': 'application/json',
         'Accept': 'application/json',
    }),

    body: JSON.stringify({
        email : 'emailHere',
        password : 'passwordHere'
    })
})

另外，请记住两件事fetch：

首先使用 fetch 获得 404 并不意味着您的请求失败。如果服务器响应 4xx 或 5xx 错误，则认为 fetch 成功。仅当发生网络错误时，才会拒绝 fetch。因此，如果您收到 404，则表示请求已到达服务器，但客户端存在问题。

其次，尝试mode在cors 您的 fetch request 中设置。mode以为默认值为cors.

推荐阅读