Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You are dealing with CORS (Cross Origin Resource Sharing) By default in all brwsers this is respected and all web servers are by default set to not allow CORS requests. More about CORS <a href="http://www.w3.org/TR/cors/" rel="nofollow">here</a></p> <p>If you are web developer, and have web server but you need access some external company API from javascript, easiest way is to setup your server to act as web proxy. Below are steps for some servers </p> <p><em>(Guru readers, feel free to add here more server configs since I proclamed this as wiki)</em></p> <h2>Appache using mod_proxy and mod_proxy_http</h2> <p>Open your virtual host file and add those lines (enable mod proxy foirst - further reading <a href="http://httpd.apache.org/docs/2.2/mod/mod_proxy.html" rel="nofollow">here</a>)</p> <pre><code>ProxyPass /proxy http://domainname.com/ ProxyPassReverse /proxy http://domainname.com/ </code></pre> <h2>Nginx</h2> <p>If you are using NGIX for your app configarion add folowing lines</p> <pre><code>location /proxy { proxy_pass http://domainname.com/; proxy_set_header X-Real-IP $remote_addr; &lt;-- maybe good to set } </code></pre> <p>Further reading on <a href="http://wiki.nginx.org/HttpProxyModule" rel="nofollow">this link</a>.</p> <h2>IIS</h2> <p>If you are using IIS server</p> <p>the config is a bit more complex then those above but you can find all about it <a href="http://blogs.iis.net/carlosag/archive/2010/04/01/setting-up-a-reverse-proxy-using-iis-url-rewrite-and-arr.aspx" rel="nofollow">here</a></p> <p><strong>For all above examples instead of using limited JSONP capabilities now you can use Ajax and JSON from response as you are serving that API on your server.</strong></p> <hr> <h1>Yes you can use it with Phonegap too with little effort</h1> <p>I can say one thing at the biggining. You will either take blue pill or Red pill :) I'm joing but there are two ways. One involes having, again, your own server with configuration as above and second is to dirty your hands with Phonegap native plugin.</p> <h2>First approach (web server owners)</h2> <p>Requires that you have your own web server. You will need above configs for mod_proxy so you can hide real service behind your service and proxy all HTTP requests from your phonegap app. You also have to include CORS (Cross Origin Resource Sharing) headers in response which is returned to phonegap app. Also consider to secure this with authentication since you are exposing content to world. Your phonegap app shold authenticate to your webservice, at least, trough basic HTTP auth over HTTPS. </p> <p>Follow this steps to complete setup:</p> <h2>Apache</h2> <p>On apache server, first enable modules "headers" </p> <p><code>$ a2enmod headers</code></p> <p>in virtual host file before or after proxy configuration add following:</p> <pre><code>ProxyPass /proxy http://domainname.com/ ProxyPassReverse /proxy http://domainname.com/ # CORS allow to all Header set Access-Control-Allow-Origin * # Set basic authentication &lt;Location /proxy&gt; AuthType Basic AuthName "Restricted Area" AuthBasicProvider file AuthUserFile /usr/local/apache/passwd/passwords Require valid-user # setup user/password in file above using htpasswd &lt;/Location&gt; </code></pre> <p>In phonegap (Sencha Touch), for ajax request setup username and password like buffer.SlowBuffer();</p> <p>You'll need first method to pack auth header </p> <pre><code>function make_base_auth(user, password) { var tok = user + ':' + pass; var hash = Base64.encode(tok); return "Basic " + hash; } </code></pre> <p>Then in your proxy set header like this</p> <pre><code>headers : { Authorization : make_base_auth("some_username", "some_password") } // I know this is readable by other by you get the point. </code></pre> <h2>IIS 6</h2> <p>To CORS-enable Microsoft IIS6, perform the following steps:</p> <ol> <li>Open Internet Information Service (IIS) Manager</li> <li>Right click the site you want to enable CORS for and go to Properties</li> <li>Change to the HTTP Headers tab</li> <li>In the Custom HTTP headers section, click Add</li> <li>Enter Access-Control-Allow-Origin as the header name</li> <li>Enter * as the header value</li> <li>Click Ok twice</li> </ol> <p>Optional, set basic auth, it's straight forward process.</p> <h2>IIS 7</h2> <p>Also consider to check documentation which is mentioned above on how to set proxy and then amend that web.config file and add folowing</p> <pre><code>&lt;configuration&gt; &lt;system.webServer&gt; &lt;httpProtocol&gt; &lt;customHeaders&gt; &lt;add name="Access-Control-Allow-Origin" value="*" /&gt; &lt;/customHeaders&gt; &lt;/httpProtocol&gt; &lt;/system.webServer&gt; &lt;/configuration&gt; </code></pre> <h2>nginx</h2> <p>In location append following</p> <pre><code>if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain charset=UTF-8'; add_header 'Content-Length' 0; return 200; } if ($request_method = 'POST') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; } if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; } </code></pre> <h2>Google App engine can be helpfull too</h2> <p>Since it is to long to fit in this box, I will provide link only to one blog where all is exlained properly</p> <p><a href="http://active.tutsplus.com/tutorials/tools-tips/quick-tip-using-google-app-engine-as-a-proxy-server/" rel="nofollow">The link</a></p> <h2>...And what about the Second Approach</h2> <p>Well it involves some native coding at least you will need phonegap plugin phonegap-proxy which you can find <a href="https://github.com/tigbro/phonegap-proxy" rel="nofollow">here</a> But I'd avoid "native" since point of phonegap is to have multi platform app using single code... Oh, if you want to do your "special" plugin writing native code here is good example how to do <a href="https://github.com/davejohnson/phonegap-plugin-facebook-connect" rel="nofollow">same thing for facebook API</a> </p> <p>It is now all up to you to decide which approach you will take ;)</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload