Angular 1.6, $http.post not working in Firefox - angularjs

I'm trying to make a simple Angular "$http.post" request to a basic registration REST API, but when I check the network tab (developer tools) in Firefox, the POST request is missing.
$http.post('http://example.com/api/user/userregistration', $scope.userInfo).then(function successCallback(response){
console.log(response.data.object, status);
$scope.processing = false;
$scope.processed = true;
},function errorCallback(response){
console.log(response.config, response.data);
});
I do see a HTTP OPTIONS pre-flight request with 200 OK response, but no subsequent POST request seems to work.
I also tried making a Jquery Ajax POST request to the same API but to no avail.
The same Angular code works perfectly fine in Chrome & Safari (OSX Sierra).
I have attached the screenshot of the OPTIONS request which is returning 200 OK but the subsequent POST request is missing (no errors in console)
Please help troubleshoot the above and suggest if I'm missing something obvious.

Ok found the problem and solved it.
The problem:
The Firefox browser installed in my OSX machine was not showing any error, hence I was unable to troubleshoot.
Checked the same POST request from a Firefox in Windows machine, fortunately saw an error saying:
Cross-origin request blocked. (Reason: invalid token "multipart/form-data" in CORS header "Access-Control-Allow-Headers")
The above error means Firefox does not treat "multipart/form-data" as a valid entry in "Access-Control-Allow-Headers" HTTP response header. (However, Chrome & Safari seem cool about it!)
The Solution:
Removed "multipart/form-data" from the "Access-Control-Allow-Headers" HTTP response header and Voila it worked in Firefox as well!

Related

Angular JS HTTP Response header not working on Safari

I am stuck in a problem where I am posting an object, in response I should get some header from the HTTP response. The problem is this code is working fine in browsers like Chrome, Firefox, IE but it returns null in case of Safari (Windows).
$http.post(url, data)
.then(function(response){
console.log(response.headers("location"));
// response.headers("location") is null in Safari
});
Below are the response headers I am getting from the server.
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:5000
Access-Control-Expose-Headers:ETag,Location
Content-Length:0
Date:Mon, 15 May 2017 12:46:14 GMT
Location: //my API
Server:Microsoft-IIS/8.5
X-Powered-By:ASP.NET
Maybe your safari is an old version that works according to the old recommendations that every custom header must be prefixed with X-
see this link:
enter link description here

Angular $http.post not working, works using postman

I've created an Ionic app which calls an API to post the user's current location.
The request works as follows:
POST: http://mywebsite.com/api/Patients/AddLocation/17
with body:
{
"Latitude": 51.3753786,
"Longitude": -0.0833691
}
However, the following code in my Ionic app does work:
$http.post('http://mywebsite.com/api/Patients/AddLocation/' + $scope.id, data)
.success(function () {
console.log('Updated location');
})
.error(function (error) {
console.log('Error updating location');
console.log("Error: " + error);
});
In which 'data' is the same as the body above.
Any ideas why this isn't working?
UPDATE:
Here's a couple of screenshots of the network request:
Network request available at imgur RWNDF.png
Postman request
It happens if you have not enabled cors in your server.
enable cors in you server.
even if you dont enable cors,
get method will work peerfectly if you have enabled cors using any extension in chrome.
It's because of CORS. Enable cros from the server end and the a header will be set in HTTP Access-Control-Allow-Origin: * .
If your server app is an expressjs app, use below code to enable CORS
var cors = require('cors');
.....
app.use(cors());
Else use chrome extension Allow Cross Origin Request
This should solve the problem
After comparing this to a sister app which uses the same API and works, the only difference I could see was that a few of the plugins were different.
To remedy this I deleted the plugins folder and the platforms folder, re-added android and just the plugins I need, it now works. I guess it's maybe some bug I created by using the wrong mixture of plugins.
A very unsatisfying answer, but all requests work now!

CORS-Issue in Firefox and Chrome

Could you please help me out in fixing the CORS-Issue in Firefox, Chrome, Safari. As my code is working fine in IE-11. When passing the Http GET request from the browser, it is giving null values in FF, Chrome, Safari. The following is the code that I am trying to execute:
$http.get(URL).success(function(data){})
.error(function(data){});
Thanks in advance.
This is nothing that can be 'fixed'. You need to enable Cross-Origin Resource Sharing (CORS) on the server side.
How you enable this depends on the kind of server. For node and express for example there are modules available that add the necessary headers to the http request and response cycle.

GET request throws error after app implemented SSL: Mixed Content: This request has been blocked; the content must be served over HTTPS"

Mixed Content: The page at 'https://www.example.com/dashboard' was
loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint
'http://api.example.com/inventory/10/'. This request has been blocked;
the content must be served over HTTPS.
We have this Angular web app that runs with Flask on the back-end.
Everything was working fine until we implemented SSL. Afterwards, we keep getting this strange error everywhere.
Now, the $http.get request in my dashboard.js is definitely calling "https://api.example.com/inventory/10" in the code below and yet the error is claiming that we are trying to request "http" instead.
$http.get($rootScope.baseUrl+'/inventory/' + item.id)
where rootScope.baseUrl is "https://api.example.com".
It's really weird because some GET requests ARE going through from our web application to our back-end, but some requests are throwing this weird error.
Here's the header that gets an error in our Network tab of the console in chrome.
Request URL:https://api.example.com/inventory/10 Request Headers
Provisional headers are shown Accept:application/json, text/plain, /
Origin:https://www.example.com
Referer:https://www.example.com/dashboard
It was a weird case that came down to removing a forward slash from the end of a URL fixing everything. Somehow, whenever we made a GET request using $http in Angular like baseurl + inventory.id + "/", it would make a http request but as soon as remove that slash, it would make the https request correctly.
Still so confused
I think the root of the problem is in server redirects. I was able to resolve same issue with SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https') setting for Django (its running behind AWS balancer). Here is documentation.

Interesting Puzzle: AngularJS app hangs on http 304

I have an app that is built using: PhoneGap + AngularJS (client) --- ExpressJS + MongoDB (server). The app is hosted on Amazon EC2 on an Ubuntu machine. The app was working totally fine, till...
On the EC2 machine I did a:
sudo apt-get update
After I did this, I started getting the Cross Origin sharing error in my app (looking at the console in Chrome). In my AngularJS app, I have code like so that was throwing the error:
$http.get('http://amazon.ec2.foo/offers').success(function(data) { });
The error was:
XMLHttprequest doesn’t allow Cross-Origin Resource Sharing on http://localhost:8000
So, I updated my server app like so:
app.all("/api/*", function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
res.header("Access-Control-Allow-Methods", "GET, PUT, POST, OPTIONS");
return next();
});
This seemed fine at first - I stopped getting the Cross Origin error, and I could see the response from the http request in the console. However, my app would stop responding and seemingly hang immediately after printing the response to the console - I am unable to click on any part of the web page, or open the developer console etc. The only resort is to close the tab and re-open it. Other tabs in Chrome were totally fine.
After debugging this for some more time, I figured that earlier (without those app headers), I was getting a HTTP 200 from the server, but now I'm getting an HTTP 304 (NOT MODIFIED), which it seems that Angular treats as an error.
I found that waiting on the tab for about ~2 minutes results in the web page loading up the data it received from the http request - but the web page stays unresponsive.
I've confirmed a few things to narrow this to AngularJS doing something weird on the HTTP 304:
I'm running this on localhost with the same error - so, it has nothing to do with EC2.
I removed mongodb to just send back some simple data - so, it has nothing to do with Mongo.
I'm running this in Chrome as a simple server - so, I've eliminated PhoneGap to be the issue.
Has anyone seen this before / do you know what the problem may be & how I can solve it?
Thanks!
Angular treats a 304 status code as a failure, to catch the 304 (untested):
var prom = $http.get('http://amazon.ec2.foo/offers')
.catch(function(resp){
if(resp.status !== 304){ $q.reject(resp) }
return resp; // response
})
.catch(function(err){
// handle or throw error
});
// Success responses and 304 responses are now available through the $http promise
prom.then( function(resp){ /* handle 200 and 304 response */ } );

Resources