Question

我无法在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，但没有“无效凭据”响应。

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

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

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

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

Answer 1

您缺少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的两件事：

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

第二，尝试将mode设置为cors in you fetch request。认为mode的默认值为cors。

Vue.js Fetch引发404和API响应

1 个答案: