$http.post not woking in AngularJS

Question

I'm trying to make a $http.post request but I have the following error:

XMLHttpRequest cannot load https://mipage.com/examplephp. Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

If I change $http.post to $http.get request the server response with the JSON, so.. I think is not problem the CORS. Also I put a proxy in the ionic project.

This is my function:

function obtenerSesion() {
        debugger;
        return $http.post(iniciarSesionUrl,
                 {params: {username: 'prueba123',password: 'prueba123'}}).then(function(response) {
            canchas = response.data;        
            return canchas;
        })
        .catch(generarError);
    }

Also the server return the JSON with or without parameters, because I thought that maybe the problem was $_POST["username"]; $_POST["password"];

But not. I hardcoded the data in the server so... the problem is in Angular JS

Can you help me to solve my problem? Thanks!

It is indeed a problem with the server's CORS configuration. In order to allow the `Content-Type` header (which Angular sets to `application/json` for the POST request), it needs to be part of the allowed headers list — Phil, Oct 19 '16 at 04:10

score 0 · Answer 1 · edited May 23 '17 at 10:27

0

The server to which the POST request is sent needs to include the Access-Control-Allow-Headers in its response.Putting them into you client has no effect.

It is up to the server to specify if it accepts the cross origin requests so the client cannot decide for itself if it permits the CORS.

Here explained in this thread

edited May 23 '17 at 10:27

Community

1
1

answered Oct 19 '16 at 04:15

Pritish Vaidya

21,561
3
58
76

damn sorry i type too slow,already marked as duplicate – Pritish Vaidya Oct 19 '16 at 04:18

score 0 · Accepted Answer · answered Oct 19 '16 at 04:43

XMLHttpRequest cannot load https://mipage.com/examplephp. Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

If I change $http.post to $http.get request the server response with the JSON, so.. I think is not problem the CORS. Also I put a proxy in the ionic project.

Explanation:

When you make an HTTP GET request from $http.get() passing params object they are appended in querystring, and because the request has no message body the angular httpProvider removes the Content-Type header of the request.

So, your $http.get params in querystring :

username=prueba123&password=prueba123

Otherwise for an HTTP POST request from $http.post() passing params object they are parsed in json and inserted in the message body of the request, then the httpProvider adds the http request header Content-Type: application/json.

So, your $http.post params in request message body:

{"username":"prueba123","password":"prueba123"}

This is done by default transformRequest function of the angular httpProvider

Somehow you're violating the CORS policy, then you have to configure your api web server or your api back-end to handle the violation of CORS policy, specifically your error is raised by the lack of content-type within Access-Control-Request-Headers response field.

Possible solution (in your specific case)

If you are running your application from a local with ionic framework, you need to configure the ionic.config.json file and add a proxy of the same address and port where its hosted your application, so you're not violating the CORS policy.

example:

    {
  "name": "example project",
  "app_id": "11ffxxxx",
   //etc etc..
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://192.168.1.152:9083/api"
    }
  ]
}

finally in your angular application you will need to configure properly api endpoint when run from a local:

function obtenerSesion() {
        debugger;
        return $http.post("/api",
                 {params: {username: 'prueba123',password: 'prueba123'}}).then(function(response) {
            canchas = response.data;        
            return canchas;
        })
        .catch(generarError);
    }

I advise you to automate this process by using a javascript task runner (gulp, grunt)

Thanks for answer. I'm using grunt serve --lab to run my project. What are you mean when you said: **I advise you to automate this process by using a javascript task runner (gulp, grunt)**,which process are you taking about? Thanks! — Faustino Gagneten, Oct 19 '16 at 18:18
assuming that your software has several release stages: local, development, production. This also applies to the backend that could have a different address for each stage. What I was suggesting if you ever have the need to manage different environment for api endpoints in the front end is to automate the process, for example by creating a json configuration file and injecting a module that retrieves the correct address based on the Stage if my answer has fixed your problem and you had to have the need to manage the api ep you can open a new question, and I will explain to you in detail. — Nedev, Oct 19 '16 at 18:51

$http.post not woking in AngularJS

2 Answers2