Do phonegap support Cors?

Question

I am newbie to phonegap. I am trying to run an AngularJs app inside phonegap. At the server side I am using Apache tomcat 7 CORS filter and Rest.When I run the app from browser it works fine. but at the moment I run the app with phonegap in ios or android, the GET request works fine but the post request gives 403 Forbidden response. I can see inside the request "Origin" header value to file://. I think the problem lies here.

My tomcat Cors filter configuration is:

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
    <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>customer,user,Delay,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
    </init-param>
    <init-param>
        <param-name>cors.exposed.headers</param-name>
        <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
    </init-param>
    <init-param>
        <param-name>cors.support.credentials</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
        <param-name>cors.preflight.maxage</param-name>
        <param-value>10</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

And this is what I get when I do post request from client:

Request URL:http://134.0.12.789:8081/test/rest-api/testing/add
Request Method:PUT
Status Code:403 Forbidden
Request Headersview source
Accept:application/json, text/plain, */*
Content-Type:application/json;charset=UTF-8
customer:Xyz
Origin:file:// 
user:user1
User-Agent:Mozilla/5.0 (Linux; Android 4.4.2; Nexus 7 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Safari/537.36
Request Payloadview source
{quantity:0.5, unit:KG, product:5791}
quantity: 0.5
unit: "KG"
product: 5791
Response Headersview source
Content-Length:0
Content-Type:text/plain
Date:Wed, 23 Jul 2014 10:43:14 GMT
Server:Apache-Coyote/1.1

Also my both www/config.xml and platform/android/res/xml/config.xml has <access origin="*" /> line added to it.

CORS is also enabled in angular.js by adding the following lines to app.js:

$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

If someone faced this problem before, Please help me out with this.

Answer 1

Yes it does, all you have to do is add this line on your config.xml file :

<access origin="http://example.com" />

You can also do this :

<access origin="*" />

But it's safer to specify the domain you're sending requests to.

If you need more information check this page on the PhoneGap doc.

Answer 2

The solution of Taher solved my problem with PhoneGap+jQuery accessing a tomcat web-service. Just included the referenced java code (https://github.com/sebastienblanc/cors-filter/blob/master/src/main/java/org/ebaysf/web/cors/CORSFilter.java#L825) in my project and added the next lines to the web.xml of the project. Redeployed it and that's it. (No corsFilter needed in Tomcat's web.xml.) Now it works both for PhoneGap requests and browser request. This definitively is some TomCat (or PhoneGap?) bug.

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>myDeploymentName.CORSFilter</filter-class>
    <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
    </init-param>
    <init-param>
        <param-name>cors.exposed.headers</param-name>
        <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
    </init-param>
    <init-param>
        <param-name>cors.support.credentials</param-name>
        <param-value>false</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

Answer 3

I changed the tomcat filter in my server. I modified the Origin header of the request inside my custom filter and it works. I dont know wether this is the right way to do things but I this is the only thing to get it working.

Answer 4

Given below is the code in Tomcat CORS filter, so new URI with Origin as "file://" throws URISyntaxException which results in 403

protected static boolean isValidOrigin(String origin) { URI originURI; try { originURI = new URI(origin); } catch (URISyntaxException e) { return false; } return originURI.getScheme() != null; }

Someone has tried to override this filter in the below link. https://github.com/sebastienblanc/cors-filter/blob/master/src/main/java/org/ebaysf/web/cors/CORSFilter.java#L825