Ionic http post delete Header Origin

ionic-v1
1

Hello All,
I am using Ionic for build app and I try to sent http POST request to server, but server return answer “HTTP/1.1 403 The origin “file://” is not authorized”. I found out that ionic adds header “Origin: file://” and because of this server rejects my request. I looked through a lot of articles, but didn’t find solution. Did anybody have the same issue?

1 Like
2

Hi,

Did you try to add this on your server-side? :

<?php header("Access-Control-Allow-Origin: *");

3

Unfortunately I don’t have permissions to change server side. I have only server api.

4

From what I know HTTP 403 error code is due to a forbidden access. Maybe the server require some authentication from your side and if you don’t have access to it, you cannot do much with your problem.

Or as you have a server-api, you probably need a KEY or auth credentials to do your POST request to the server.

5

I tried to send request using “httpie” without “origin”. It was successful. But if I add header “origin” to my request server returns me error. I checked my credential they are right. It looks like that the problem is that ionic adds header ‘origin’ and server can’t accept the request with this header.

6

Maybe you can show us your code to have a better understanding of how you do your request.

Also you need to generate a request that does not specify an origin. You can do this by configuring a proxy in your Ionic app like that:

(ionic.project):
{ "name": "proxy-example", "app_id": "", "proxies": [ { "path": "/api", "proxyUrl": "http://cors.api.com/api" } ] }

See this interesting post as it looks like you are having some CORS issues:

http://blog.ionic.io/handling-cors-issues-in-ionic/

7

I have to change some words in URL because of I am not allowed to share origin code. Sorry for this.
var req = {
url: ‘https://Oauth:nUW0UacrN02o2cOQTCDmytlTgh4Ofm62Edo503MOT8Zx@Oauth.hpe.com/api/oauth’,
method: ‘POST’,
crossDomain: true,
xhrFields: {
withCredentials: true
},
headers: {
“Access-Control-Allow-Origin”: “*”,
“access-control-allow-methods”: “GET, POST, PUT, DELETE, OPTIONS”,
“access-control-allow-headers”: “content-type, accept”
},

    data: {
      grant_type: "password",
      username: "********",
      password: "********"

    }
  };

  $http(req).success(function (resps) {
      $ionicPopup.alert({
        title: 'success',
        template: resps
      });   
  }).error(function (resps) {			  
      $ionicPopup.alert({
        title: 'Error',
        template: resps
      });          
    });
8

Ok I bet it’s not an error coming from your code but you probably need to configure a Ionic proxy as I said on my last reply. Your problem is that the endpoint server doesn’t recognise the Origin file:/// So, you need to do the request through a proxy and everything should be fine after that.

9

Thanks for your answer, as far as I know proxy does not work with POST request?

10

I’m not sure about that, normally it should works, last time I used a proxy for a PHP server-side the POST request was working fine. I think you should give it a try to bypass your current problem.

Here is a handy Ionic-proxy example that you can use for your project and this is exactly what you need to do:

Let me know.

11

I have added following changes

“proxies”: [ {
“path”: “/api/oauth”,
“proxyUrl”: “https://Oauth:nUW0UacrN02o2cOQTCDmytlTgh4Ofm62Edo503MOT8Zx@Oauth.hpe.com/api/oauth”
}]

var req = {
url: ‘http://localhost:8100/oauth’,
method: ‘POST’,
crossDomain: true,
…

but I got error with response “Cannot POST /oauth”

12

@SergeyRy Did you try to simply clone the ionic-proxy-example, play with it and then just replace the ionic.project configuration with your own API Url to see if it does work?

13

I have cloned this project. It works fine. But when I put my Post request into field “proxyUrl” I get me the same error: “POST http://localhost:8100/api 403 (Forbidden)”

14

@SergeyRy Of course you get this error. As we said you need to create an external proxy out of your local environment for the server to be able to hit the client. You need to setup your project online, something different than localhost.

Look, it says:

There are two parts to this project:

In your case, the server is out of localhost you cannot do that.

15

You can make your localhost available by using ngrok: https://ngrok.com/

It will create a tunnel between your localhost and the server and you just need to provide the ngrok URL to your ionic.project proxy-configuration. You will have more luck if you test like that instead of providing your localhost to your external private server.

./ngrok http localhost 8100

16

Thanks a lot for your answers! I will try this.

17

@SergeyRy You’re welcome, let me know how it goes.

18

I have used ‘ngrok’ and have done the follow things:

  1. ionic.project

“proxies”: [{
“path”: “/api”,
“proxyUrl”: “https://Oauth:nUW0UacrN02o2cOQTCDmytlTgh4Ofm62Edo503MOT8Zx@oauth.hpe.com/api/oauth”
}]

  1. Send request from ionic app

    var req = {
    url: “http://1576d5df.ngrok.io/api”,
    method: ‘POST’,
    headers: {
    “Access-Control-Allow-Origin”: “*”,
    “access-control-allow-methods”: “GET, POST, PUT, DELETE, OPTIONS”,
    “access-control-allow-headers”: “content-type, accept”
    },

    data: {
    grant_type: “password”,
    username: “",
    password: "    ”

    }
    };

    $http(req);

but I got error http://img.in6k.com/screens/screen93b60e21b446.png. Maybe I am doing something wrong?

19

Also I have tried to use projects https://github.com/driftyco/ionic-proxy-example. I have changed GET to POST and shared ionic project and server using ‘ngrok’. I got the same issue((

20

Ok I got your issue, the server is using HTTPS protocol witch mean you also need to setup the SSL protocol into your POST request, this is why it is 403 - Forbidden.

Try to replace the HTTPS by HTTP?