All geek questions in one place

Access-Control-Allow-Origin error while receiving Wordpress messages in Phonegap application

I hope someone can help me solve the following problem when developing a mobile application in a telephone stutter. I am trying to read messages from a wordpress installation, but I get this error when I run my index.html page on chrome

XMLHttpRequest cannot load Origin null not allowed Access-Control-Allow-Origin.

I have a JSON API plugin installed in wordpress, and when I go to the page I want, I can view it in order. My code is as follows:

<!DOCTYPE HTML> <html> <header> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> function readSinglePost (url,target_div) { var URL = url//+"&callback=?"; console.log(URL); jQuery.ajax({ url: URL, dataType: 'json', success: function(data) { console.log(data); jQuery(target_div).append("<h1>"+data.post.title+"</h1>"); jQuery(target_div).append(data.post.content);jQuery(target_div). append("<small>"+data.post.date+"</small>"); console.log(data.post.content); } }); } jQuery(document).ready(function() { var url = "http://www.example.com/api/get_post/?json=get_post&dev=1&id=5486"; var target_div = "#contents"; readSinglePost(url, target_div); }); </script> </header> <body> <div id="main"> <div id="title"></div> </div> </body> </html>

UPDATE In response to Jamie below

Raw request

 GET /api/get_post/?json=get_post&dev=1&id=5486 HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:22.0) Gecko/20100101 Firefox/22.0 Accept: application/json, text/javascript, */*; q=0.01 Accept-Language: en-US,en;q=0.5 Accept-Encoding: gzip, deflate DNT: 1 Origin: null Connection: keep-alive

Raw answer

 HTTP/1.1 200 OK Date: Fri, 05 Jul 2013 16:51:49 GMT Server: Apache/2.2.11 (Unix) Expires: Thu, 19 Nov 1981 08:52:00 GMT Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Pragma: no-cache X-Pingback: http://www.example.com/xmlrpc.php Set-Cookie: PHPSESSID=f6308c2732752bbb1149b345018bdf68; path=/ Set-Cookie: wc_session_cookie_a111a960a9b29354988b3de48943ad50=IRhSF41ZHIBHMA3mmCCSSjdOSxqXf2wj%7C%7C1373215910%7C%7C1373212310%7C%7Cd472ed970a72ba78e8b2c836a1d8b2cc; expires=Sun, 07-Jul-2013 16:51:50 GMT; path=/; httponly Set-Cookie: woocommerce_items_in_cart=0; expires=Fri, 05-Jul-2013 15:51:50 GMT; path=/ Set-Cookie: woocommerce_cart_hash=0; expires=Fri, 05-Jul-2013 15:51:50 GMT; path=/ Keep-Alive: timeout=15, max=100 Connection: Keep-Alive Content-Type: text/plain; charset: UTF-8 Content-Length: 57602
+6
source share
4 answers

Thus, the problem you are facing is usually called Cross Origin Security. Basically, most web browsers will not allow you to download content from servers outside of your own, unless the server says that everything is in order. To do this, the server needs to see an acceptable Access-Control-Allow-Origin in the headers.

The good news is that this is fairly easy to fix, as Bowdenweb points out How to enable cors in WordPress .

You only need to add the appropriate header to the headers.php file, for example

 <?php /** @package WordPress @subpackage Default_Theme **/ header("Access-Control-Allow-Origin: *"); ?> <!DOCTYPE html>

Update 1

As ILI noted, there is a plugin for Wordpress called WordPress-Cross-Domain-Plugin that solved this problem for it.

+12
source

Browsers do not allow cross-domain calls in ajax by default. Jamie Stark gives you the answer. Perhaps try using $.support.cors = true; with jQuery. In any case, the Phonegap application can perform ajax requests for cross domains. If you cannot, check your config.xml http://docs.phonegap.com/en/edge/guide_whitelist_index.md.html

+3
source 
 in plist file add <key>NSAppTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict> <key>yourdominename.com</key> <dict> <!--Include to allow subdomains--> <key>NSIncludesSubdomains</key> <true/> <!--Include to allow HTTP requests--> <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> <true/> <!--Include to specify minimum TLS version--> <key>NSTemporaryExceptionMinimumTLSVersion</key> <string>TLSv1.1</string> </dict> </dict> </dict>

in the configuration file

  <preference name="BackupWebStorage" value="none" />
+1
source

Those who are still having problems with Access-Control-Allow-Origin, even though they have wildcards for their config.xml, might want to check this out if they use Jellybean. From what I can collect, it is fixed in the latest version of the telephone conversation, but installing the latest version is beyond my limited talents!

Read the following: Disabling Bean Phone / Cordoba Jelly - Access-Control-Allow-Origin and setAllowUniversalAccessFromFileURLs

0
source

Source: https://habr.com/ru/post/948793/

More articles:


All Articles