7

希望有人可以帮助我在 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>

更新 响应下面的杰米

原始请求 

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
4

4 回答 4

13

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

好消息是这很容易解决，正如 Bowdenweb 在How to Enable cors in WordPress中指出的那样。

您只需要在headers.php文件中添加适当的标题，就像这样

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

更新 1

正如 ILI 所指出的，有一个名为WordPress-Cross-Domain-Plugin的 Wordpress 插件为他解决了这个问题。

于 2013-07-05T14:50:41.717 回答
3

默认情况下，浏览器不允许在 ajax 中进行跨域调用。杰米斯塔克给你答案。也许尝试$.support.cors = true;与 JQuery 一起使用。无论如何，Phonegap 应用程序可以执行 ajax 跨域请求。如果不能，请检查您的 config.xml http://docs.phonegap.com/en/edge/guide_whitelist_index.md.html

于 2013-07-05T16:10:16.160 回答
1 
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>

在配置文件中

 <preference name="BackupWebStorage" value="none" />
于 2015-09-23T07:25:30.383 回答
0

那些尽管使用通配符的 config.xml 仍然有 Access-Control-Allow-Origin 问题的人可能想检查一下他们是否正在使用 Jellybean。据我所知，它已在最新版本的 phonegap 中修复，但安装最新版本超出了我有限的才能！

阅读本文：Phonegap/Cordova App 在 Jelly Bean 中中断 - Access-Control-Allow-Origin 和 setAllowUniversalAccessFromFileURLs

于 2013-12-12T17:04:25.237 回答