2

I'm trying to debug ionic app in mac:

$ ionic cordova emulate ios -- --buildFlag="-UseModernBuildSystem=0" --debug

In one of the requests of API SERVER(.NET) I get the error:

Request header field Content-Type is not allowed by Access-Control-Allow-Headers

enter image description here

login(login: LoginModel | null): Observable<LoginInfo | null> {
  let url_ = this.baseUrl + "/API/Login/Login";
  url_ = url_.replace(/[?&]$/, "");

  const content_ = JSON.stringify(login);

  let options_ : any = {
    body: content_,
    observe: "response",
    responseType: "blob",
    headers: new HttpHeaders({
      "Content-Type": "application/json", 
      "Accept": "application/json"
    })
  };

  return this.http.request("post", url_, options_).flatMap((response_ : any) => {
    return this.processLogin(response_);
  }).catch((response_: any) => {
    if (response_ instanceof HttpResponseBase) {
      try {
        return this.processLogin(<any>response_);
      } catch (e) {
        return <Observable<LoginInfo | null>><any>Observable.throw(e);
      }
    } else
      return <Observable<LoginInfo | null>><any>Observable.throw(response_);
   });
 }
SuperStar518
  • 2,814
  • 2
  • 20
  • 35
Tati M
  • 21
  • 2
  • 1
    You need to verify in your server side whether CORS is setup correctly. `Access-Control-Allow-Headers` is set in server side – Suraj Rao Jun 25 '19 at 12:11
  • @SurajRao in server side it set. It response me error if i put the parameter - class json. – Tati M Jun 25 '19 at 12:19
  • Possible duplicate of [XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header](https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-xxx-no-access-control-allow-origin-header) – Quentin Jun 26 '19 at 13:02

2 Answers2

0

So the correctly it to set Access-Control-Allow-... in server.

  • Safari does not allow * like:
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "*");

Correct setting is:

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
SuperStar518
  • 2,814
  • 2
  • 20
  • 35
Tati M
  • 21
  • 2
0

You can set some configs in your express.js server.

app.use(function(req, res, next) {
  var allowedOrigins = [
    'http://localhost',
    'http://localhost:8000',
    'http://127.0.0.1',
    'http://127.0.0.1:8000',
    'http://yourdomain.com',
  ];
  var origin = req.headers.origin;
  if (allowedOrigins.indexOf(origin) > -1) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }
  res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Allow-Credentials', true);
  next();
});
SuperStar518
  • 2,814
  • 2
  • 20
  • 35