在 Phonegap 应用程序中获取 Wordpress 帖子时出现 Access-Control-Allow-Origin 错误

2024-01-05

希望有人可以帮助我在phonegap中开发移动应用程序时解决以下问题。我正在尝试从 WordPress 安装中读取帖子,但是当我在 chrome 上运行我的 index.html 页面时出现此错误

XMLHttpRequest 无法加载 Origin null 是 Access-Control-Allow-Origin 不允许的。

我在 WordPress 中安装了 JSON-API 插件,当我导航到我想要的页面时,我可以正常查看它。我的代码如下:

<!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在下面回复杰米

原始请求

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

原始响应

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

因此,您遇到的问题通常称为跨源安全性。基本上,大多数网络浏览器不允许您从自己之外的服务器提取内容,除非服务器表示可以。为此,服务器需要看到一个可接受的Access-Control-Allow-Origin在标题中。

好消息是这个问题很容易解决,正如 Bowdenweb 在如何在 WordPress 中启用 cors http://bowdenweb.com/wp/2011/05/how-to-enable-cors-in-wordpress.html.

您只需要在其中添加适当的标头即可headers.php文件,像这样

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

Update 1

正如 ILI 指出的,Wordpress 有一个插件,名为WordPress 跨域插件 https://github.com/jacopotarantino/WordPress-Cross-Domain-Plugin这为他解决了这个问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Phonegap 应用程序中获取 Wordpress 帖子时出现 Access-Control-Allow-Origin 错误 的相关文章

随机推荐