Question

我正在使用NuxtJS的$axios模块，并且正在与后端API交互，该API设置了登录后用于进一步身份验证请求的身份验证cookie。我研究了withCredentials: true，但仍然没有正确合作。

我需要设置特定的标头值还是我的axios配置有问题？

我只想保留并使用成功登录后收到的cookie，并在下一个请求中使用它来进行经过身份验证的请求。

// nuxt.config.js
axios : {
    ...
    credentials: true,
    withCredentials : true,
    requestInterceptor: (config, {store}) => {
        config.headers.common['Content-Type'] = 'application/json';
        config.headers.common['API-Key'] = 'my_api_key';
        return config
    },
    ...
},

这是我发出axios请求的地方


async asyncData({ $axios}) {
    try {
        // this response sends back an authentication cookie
        const login_response = await $axios.$post("my_login_route",{
            password : this.password,
            username : this.email,
        });

        if(login_response.success){
            // how i send my cookie to this route to prove im authenticated?
            const authenticated = await $axios.$get("my_url");
            console.log(authenticated); // always false; doesn't send cookie recieved in login $post request
        }else{
            console.log("Invalid username or password");
        }
    } catch(error) {
        console.log(error);
    }
}

我制作了一个测试页面，其中提出了一个简单的请求，以检查用户是否已通过身份验证。 结果是，nuxt.config.js中的axios设置未在此处应用。

我需要axios配置不仅适用于基本URL，而且还适用于我的API路由。这是一种当我按下测试按钮时会激活的测试方法：

check_auth : async function(){
    try {
        const response = await this.$axios.$get("https://<my_url>/Utility/IsAuthenticated/");
        console.log("IS AUTH:");
        console.log(response.isAuthenticated);
    }catch(error){
        console.log("something went wrong.");
    }
},

AXIOS要求正确的HTTP请求标头 如您所见，我在axios配置中没有指定cookie或API-Key头。

Host: <my_url>
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:67.0) Gecko/20100101 Firefox/67.0
Accept: application/json, text/plain
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: http://localhost:1337/send/account
Origin: http://localhost:1337
DNT: 1
Connection: keep-alive

我需要在我的axios nuxt.config.js部分中进行哪些更改，以允许axios配置应用于我的api路由？我需要使用proxy:{}部分吗？

请帮助！

Answer 1

因此，问题毕竟是不是 axios。

我要连接的API不允许外部来源使用它的cookie，这是一些跨域的东西。问题是axios在尝试使用fetch()之前没有对跨域问题发出任何警告，这是我在控制台中看到有关服务器不允许跨域cookie或其他内容的警告，然后开始做研究。

NuxtJS $ axios发送带有请求的Cookie

1 个答案: