Just want to say thank you in advance. I tried searching online for a solution to this issue, but couldn't find anything that worked. Currently, I am working on a web application using vue.js for the front end and AWS Lambda functions with API Gateway as the REST service. In my web app, there is a login component that makes an ajax call to an AWS endpoint. For this ajax call, I am using axios.post.
Here is a snippet of the code:
loginUser(username, password) {
const vm = this;
var apiUrl = `${this.host}/user/login`;
const requestBody = {
username: username,
password: password,
};
axios
.post(apiUrl, requestBody, { headers: { 'Content-Type': 'application/json', 'Accept': 'application/json'} })
.then((response) => {
window.console.log('Login Response')
window.console.log(JSON.stringify(response))
store.dispatch('login', { user: response.data, error: '' });
vm.resultSubject.next(response.data);
})
.catch((error) => {
vm.resultSubject.error('Failed Login');
window.console.log(error);
});
return this.resultSubject;
}
Everything seems to be working fine when I log in using a laptop browser, but when I try the same on my mobile browser, I get an empty response. The status code is 200, but no response data is returned. Interestingly, a GET call works without any issues. Here are some screenshots demonstrating the problem:
network tab iphone safari - empty response
console tab iphone safari - response logged with actual js file
network tab laptop safari - with response
console tab laptop safari - response logged with data
network tab iphone safari - with response on different GET call