Response for preflight has invalid HTTP status code 403 on angular post request

Question

I am having an $http request in my localhost which is calling a url of some api. I am getting an error on executing the call

Response for preflight has invalid HTTP status code 403

Can I do anything using angular so that I can fix this issue? I have CROS plugin of chrome to allow cross origin request

$http({
                method: 'POST',
                url: url,
                data:data1,
                headers: {
                    'Access-Control-Allow-Origin': '*',                 
                }
            })

It's the server side script/code that needs to add allow origin to their code. — Olantobi, Sep 20 '16 at 09:59
possible solution https://stackoverflow.com/questions/47082492/how-to-send-post-request-using-http-from-angular-http?noredirect=1#47082492 — Akshay Vijay Jain, Nov 02 '17 at 20:53

score 5 · Answer 1 · answered Jan 26 '17 at 17:03

5

If you using java restful controller as your server. You can refer to https://spring.io/guides/gs/rest-service-cors/

I added @CrossOrigin(origins = "*") on my controller and it works. Basically, you cannot do anything in the client side.

Lin

answered Jan 26 '17 at 17:03

Lin W

289
4
4

This worked for me. Any risks with keeping this annotation on the controller methods in the Java code long-term? – wheeleruniverse Aug 03 '17 at 21:17

score 1 · Accepted Answer · edited May 23 '17 at 12:16

Ok so here's how I figured this out. It all has to do with CORS policy. Before the POST request, Chrome was doing a preflight OPTIONS request, which should be handled and acknowledged by the server prior to the actual request. Now this is really not what I wanted for such a simple server. Hence, resetting the headers client side prevents the preflight:

app.config(function ($httpProvider) {
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
});

The browser will now send a POST directly. Hope this helps a lot of folks out there... My real problem was not understanding CORS enough.

Link to a great explanation: http://www.html5rocks.com/en/tutorials/cors/

Kudos to this answer for showing me the way. AngularJS POST Fails: Response for preflight has invalid HTTP status code 404

Is there a solution like this that will work in jQuery? – wheeleruniverse Aug 03 '17 at 21:15 — wheeleruniverse, Aug 03 '17 at 21:15
How to do this in Angular2? – firstpostcommenter Jun 14 '18 at 20:11 — firstpostcommenter, Jun 14 '18 at 20:11

score 1 · Answer 3 · edited Jun 02 '17 at 10:30

I have this code in angularjs:

$http.post('http://localhost:8080/employee/'
        , $scope.alumno
        ,{headers: {'Content-Type': 'application/json'}}
        ).success(function(data){

            if ( data.err === false ) {
                $scope.actualizado = true;

                setTimeout(function() {
                    $scope.actualizado = false;
                    $scope.$apply();
                }, 3500);

            };
        });

My API have this data:

//Add employee:
Url: http://localhost:8080/employee
Type request: POST
Add a new employee:
{
 "firstName": "Javier",
 "lastName": "Piedra",
}`

I use chrone with extension for available CORS for the GET all perfect but post sample this error:

XMLHttpRequest cannot load http://localhost:8080/employee/. Response for 
preflight has invalid HTTP status code 403

In my app.config use:

app.config( function($routeProvider,$httpProvider){

$httpProvider.defaults.headers.common = {};
$httpProvider.defaults.headers.post = {};
$httpProvider.defaults.headers.put = {};
$httpProvider.defaults.headers.patch = {};

Maybe this can be a solution for your issue.

Regards

If you have a new question, please ask it by clicking the [Ask Question](https://stackoverflow.com/questions/ask) button. Include a link to this question if it helps provide context. - [From Review](/review/low-quality-posts/16301631) — Nick is tired, Jun 02 '17 at 09:13
Thanks. I can´t ask: You have reached your question limit . Regards — juanitourquiza, Jun 02 '17 at 12:24

Response for preflight has invalid HTTP status code 403 on angular post request

3 Answers3

Linked