Access-Control-Allow-Origin error when getting Wor

2019-03-20 14:02发布

站内问答 / 前沿技术
1547 4 4

Hopefully someone can help me to resolve the following problem while developing a mobile app in phonegap. I am attempting to read posts from a wordpress installation but I get this error when I run my index.html page on chrome

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

I have JSON-API plugin installed in wordpress and when I navigate to the page I want I can view it ok. 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 Response

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

4条回答
再贱就再见
2楼-- · 2019-03-20 14:25

Those who are still having problems with Access-Control-Allow-Origin despite having wildcarded their config.xml might like to check this out if they're using Jellybean. From what I can gather it is fixed in the newest version of phonegap but installation of the newest version is beyond my limited talents!

Read this: Phonegap/Cordova App breaks in Jelly Bean - Access-Control-Allow-Origin and setAllowUniversalAccessFromFileURLs

查看更多
0人赞 添加讨论(0) 举报
做个烂人
3楼-- · 2019-03-20 14:26

Browsers don't allow cross domain calls in ajax by default. Jamie Starke gives you the answer. Maybe try to use $.support.cors = true; with JQuery. Anyway, a Phonegap app can do ajax cross domain requests. If you can't, check your config.xml http://docs.phonegap.com/en/edge/guide_whitelist_index.md.html

查看更多
0人赞 添加讨论(0) 举报
唯我独甜
4楼-- · 2019-03-20 14:26 
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 config file 

 <preference name="BackupWebStorage" value="none" />
查看更多
0人赞 添加讨论(0) 举报
劳资没心，怎么记你
5楼-- · 2019-03-20 14:42

So the problem that you are running into is commonly referred to as Cross Origin Security. Basically, most web-browsers will not allow you to pull in content from servers outside your own, unless the server says it is ok. 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 in How to Enable cors in WordPress.

You only need to add the appropriate header to the headers.php file, like so

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

Update 1

As ILI pointed out, there is a plugin for Wordpress called WordPress-Cross-Domain-Plugin which resolved this issue for him.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)