5

I am just trying to make an http post call in my IONIC 2 project. When I run ionic serve it works fine. But when I run ionic run anroid to run it on my device it gives me 403 (forbidden) response.

This is my PaymentService.ts in which http call has been made

import {Http, Headers, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map';
import { Injectable } from '@angular/core';

@Injectable()
export class PaymentService {
static get parameters() {
    return [[Http]];
}

constructor(private http:Http) {}

postToPaymentApi(data) {
    let headers: Headers = new Headers()
    headers.set('Content-type', 'application/x-www-form-urlencoded')
    let options = new RequestOptions({headers: headers})

    var response = this.http.post("http://test/url",data,options).map(res => res.json());
    return response;
   }
 }
}

To overcome this problem I have tried several things, like

  1. Run cordova plugin add cordova-plugin-whitelist
  2. Added this line in my config.xml <meta http-equiv="Content-Security-Policy" content="default-src *; img-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
  3. Followed this link -> https://github.com/apache/cordova-plugin-whitelist to add <access origin> as *, <allow-navigation>, <allow-intent> tags with specified attributes.
  4. Tried to add proxyUrl as mentioned in here http://blog.ionic.io/handling-cors-issues-in-ionic/

But In my case, no above solution is working.

When I hit the post call from my android device I get the following error response:

{"_body":"",
"status":403,
"ok":false,
"statusText":"Forbidden",
"headers":{"Date":["Wed","30 Nov 2016 09:28:53 GMT"],
"Content-Length":["0"]},
"type":2,
"url":"http://test/url"}

I have following ionic info:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v7.2.0
Xcode version: Not installed

Anyone with some solution?

Thanks in advance.

jyokaran
  • 65
  • 7

2 Answers2

0

Can you try this example? Are you sure you are sending right headers

postToPaymentApi(data) {
   let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });

   return new Promise(resolve => {
      this.http.post('http://test/url',data, {headers: headers })
         .subscribe(respond => {
           console.log(respond);       
         });   
   });        
}
flakerimi
  • 2,580
  • 3
  • 29
  • 49
  • Yes, I am sending the correct headers. The same request is running fine with ionic serve (on browser), but not with **ionic run android** (that's, on actual device) I have tried the above mentioned example, but still same issue – jyokaran Dec 01 '16 at 07:23
  • Try` ionic run android -l -s -c` it will give you better console log also there is `chrome://inspect` and there are inspect for devices – flakerimi Dec 01 '16 at 19:48
  • yes @flakerimi I have tried `chrome://inspect` already, but it is of not much help. Actually, the problem is because of origin: file:// ` which is not allowed from the server side. – jyokaran Dec 09 '16 at 06:45
0

I was getting the same error here, I found that this happen because when you run ionic serve, the request origin start with "http://" or "https://" and on ionic run android it starts with "file:///".

To solve this problem you need to change the server side CORS filter to recognize "file///" requests:

Access-Control-Allow-Origin: *
  • 1
    Shouldn't the ionic proxy remove the ORIGIN header?? If not, everyone has to remove the Access-Control-Allow-Origin and this should not be the solution! – Michael Burger May 16 '17 at 08:52