Angular $http options instead post

Question

I make $http POST request to a server api but request method changes to OPTIONS. I do it all with localhost. So I did the same request through the Postman and everything works

Service:

function httpReg(userData) {
            console.log(userData)
            return $http({
                method: 'POST',
                url: CONFIG.APIHost + '/auth/signup',
                data: {
                    "username": userData.username,
                    "email":userData.email,
                    "password": userData.password
                },
                headers: {
                    'Content-Type': 'application/json; charset=utf-8'
                }
            });
        }

Screenshot:
_{(source: joxi.net)}

This is probably a CORS problem with your server (http://stackoverflow.com/a/12112294/5122581). Since Postman has higher privileges than web content, it does not run into the same problem. — Phillip, Feb 06 '17 at 22:25
If `CONFIG.APIHost` is a different server, it's likely trying to initiate [CORS](https://upload.wikimedia.org/wikipedia/commons/c/ca/Flowchart_showing_Simple_and_Preflight_XHR.svg) — Paul Abbott, Feb 06 '17 at 22:25
Neither `$http` nor angular nor javascript have anything to do with it. The browser does that for cross origin requests. The endpoint needs to be CORS enabled — charlietfl, Feb 06 '17 at 22:28
CORS requests that aren't simple require an OPTIONS preflight. If your server doesn't support said preflight, the request will be rejected by the browser. Fix the server. — Kevin B, Feb 06 '17 at 23:19
That is a normal pre-flight OPTIONS request and the server is returning good CORS headers. So what is the problem? — georgeawg, Feb 07 '17 at 03:38

score 1 · Answer 1 · answered Feb 07 '17 at 06:16

Actually your preflight request is bounced back.

If the browser doesn't trusts the data source you are hitting the browser first sends a preflight request to that server and if that returns 200OK, then browser will send your original request.

The applies only to browsers, and other tools such as postman dosen't send and preflight requests, so your code might work their.

How to solve the problem.

Add headers for accepted options GET, POST, OPTIONS, PUT to the requested resource.

score -2 · Answer 2 · edited May 23 '17 at 12:01

Yes it looks like cors problem.

Try one of the following:

Try to set the referrer in your header

Try this:

app.config(['$httpProvider', function ($httpProvider) {
   //Reset headers to avoid OPTIONS request (aka preflight)
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
}]);

Remove the x-auth* settings from _app.js file of your yeoman/gulp settings.

Reference: AngularJS performs an OPTIONS HTTP request for a cross-origin resource

Angular $http options instead post

2 Answers2