在 Phonegap 应用程序中获取 Wordpress 帖子时出现 Access-Control-Allow-Origin 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17491185/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Access-Control-Allow-Origin error when getting Wordpress posts in Phonegap app
提问by ILI
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
希望有人可以帮助我在 phonegap 中开发移动应用程序时解决以下问题。我正在尝试从 wordpress 安装中读取帖子，但是当我在 chrome 上运行我的 index.html 页面时出现此错误
XMLHttpRequest cannot load Origin null is not allowed by Access-Control-Allow-Origin.
Access-Control-Allow-Origin 不允许 XMLHttpRequest 无法加载 Origin null。
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:
我在 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>
UPDATEIn 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
回答by Jamie Starke
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-Originin the headers.
因此，您遇到的问题通常称为跨域安全。基本上，大多数网络浏览器不允许您从您自己以外的服务器中提取内容，除非服务器说可以。为此，服务器需要Access-Control-Allow-Origin在标头中看到可接受的。
The good news is that this is fairly easy to fix, as Bowdenweb points out in How to Enable cors in WordPress.
好消息是这很容易修复，正如 Bowdenweb 在如何在 WordPress 中启用 cors 中指出的那样。
You only need to add the appropriate header to the headers.phpfile, like so
您只需要在headers.php文件中添加适当的标题，就像这样
<?php /** @package WordPress @subpackage Default_Theme **/
header("Access-Control-Allow-Origin: *");
?>
<!DOCTYPE html>
Update 1
更新 1
As ILI pointed out, there is a plugin for Wordpress called WordPress-Cross-Domain-Pluginwhich resolved this issue for him.
正如 ILI 所指出的，Wordpress 有一个名为WordPress-Cross-Domain-Plugin 的插件为他解决了这个问题。
回答by guillaumeb
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
默认情况下，浏览器不允许在 ajax 中进行跨域调用。杰米·斯塔克给你答案。也许尝试$.support.cors = true;与 JQuery一起使用。无论如何，Phonegap 应用程序可以执行 ajax 跨域请求。如果不能，请检查您的 config.xml http://docs.phonegap.com/en/edge/guide_whitelist_index.md.html
回答by Sammeta Srikanth
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" />
回答by Jon Bray
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!
尽管使用通配符 config.xml 仍然遇到 Access-Control-Allow-Origin 问题的那些人，如果他们使用的是 Jellybean，可能想检查一下。据我所知，它已在最新版本的 phonegap 中修复，但安装最新版本超出了我有限的才能！
