programing

Phonegap 앱에서 Wordpress 게시물을 가져올 때 Access-Control-Allow-Origin 오류가 발생함

newsource 2023. 2. 7. 20:00

Phonegap 앱에서 Wordpress 게시물을 가져올 때 Access-Control-Allow-Origin 오류가 발생함

폰갭에서 모바일 앱을 개발하면서 다음과 같은 문제를 해결할 수 있는 사람이 있었으면 좋겠습니다.워드프레스 설치에서 투고를 읽으려고 하는데 chrome에서 index.html 페이지를 실행하면 이 오류가 나타납니다.

XMLHttpRequest를 로드할 수 없습니다.원래지 null이 Access-Control-Allow-Origin에서 허용되지 않습니다.

워드프레스에 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>

업데이트 아래 Jamie에 대한 답변

미가공 요구

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의 코르스를 활성화하는 방법에서 지적한 바와 같이 이 문제를 수정하기가 매우 쉽다는 것입니다.

적절한 헤더를 추가하기만 하면 됩니다.headers.php파일, 이렇게

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

업데이트 1

ILI가 지적했듯이 WordPress-Cross-Domain-Plugin이라는 Wordpress용 플러그인이 있어 이 문제를 해결했습니다.

브라우저는 기본적으로 도메인 간 호출을 허용하지 않습니다.제이미 스타크가 답을 알려드립니다.사용해보겠습니다.$.support.cors = true;JQuery와 함께.어쨌든 Phonegap 앱은 도메인 간 에이잭스 요청을 수행할 수 있습니다.사용할 수 없는 경우 config.xml http://docs.phonegap.com/en/edge/guide_whitelist_index.md.html을 확인하십시오.

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" />

config.xml 와일드카드를 사용했는데도 Access-Control-Allow-Origin에 문제가 있는 사용자는 Jellybean을 사용하는 경우 이를 체크할 수 있습니다.내가 아는 바로는 최신 버전의 폰갭으로 고정되어 있지만, 최신 버전의 설치는 나의 한정된 재능을 넘어섰어!

다음 내용을 읽어주세요.Jelly Bean - Access-Control-Allow-Origin 및 setAllowUniversalAccessFromFile에서 Phonegap/Cordova 앱이 중단됨URL

언급URL : https://stackoverflow.com/questions/17491185/access-control-allow-origin-error-when-getting-wordpress-posts-in-phonegap-app