Access-Control-Allow-Origin错误在Phonegap应用程序中获取Wordpress帖子 [英] Access-Control-Allow-Origin error when getting Wordpress posts in Phonegap app
问题描述
希望有人能够在phonegap中开发移动应用程序时帮助我解决以下问题。我试图阅读从WordPress安装的帖子，但我在chrome上运行我的index.html页时出现此错误
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无法加载Origin null不是
我在JSONpress中安装了JSON-API插件，当我导航到我想要的页面时没关系。我的代码如下：
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
到
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
原始回应
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 。
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.
好消息是，这很容易解决，因为Bowdenweb指出如何在WordPress中启用cors 。
The good news is that this is fairly easy to fix, as Bowdenweb points out in How to Enable cors in WordPress.
您只需要添加相应的标题到 headers.php 文件，如下所示
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>
更新1
正如ILI指出的，Wordpress的一个插件叫做 WordPress-Cross-Domain-Plugin 这为他解决了这个问题。
As ILI pointed out, there is a plugin for Wordpress called WordPress-Cross-Domain-Plugin which resolved this issue for him.
这篇关于Access-Control-Allow-Origin错误在Phonegap应用程序中获取Wordpress帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
