我正在使用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);
}
}
我通过发出一个简单的请求来检查用户是否已通过身份验证,从而形成了一个测试页。原来,此处的axios设置nuxt.config.js
未应用。
I need the axios configuration to apply to not just the base URL, but to my API routes. Here is a test method that activates when I press a test button:
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.");
}
},
HTTP REQUEST HEADERS FOR AXIOS REQUEST MADE RIGHT ABOVE
As you can see, there are no cookies or API-Key
headers that I specified in the axios config.
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
What do I need to change in my axios nuxt.config.js
section to allow the axios configuration to apply to my api route? Do i need to use the proxy:{}
section?
Please help!!
因此,问题毕竟不是 axios。
我连接的API不允许外部来源使用它的cookie,这是一些跨源的东西。问题是axios在尝试使用之前不会发出有关跨域问题的任何警告
fetch()
,这是我在控制台中看到有关服务器不允许跨域cookie或类似内容的警告,然后开始进行研究的地方。有关:
如何在node.js的express.js框架中启用跨域资源共享(CORS)
https://github.com/axios/axios/issues/853
感谢到目前为止在评论中提供的帮助,但从外观上看,axios库对此几乎没有任何修复,因为它是一种广泛内置的浏览器安全性。
如果有人对在浏览器的CLIENT端上运行有其他建议或答案,请与我们分享。