1

「Access-Control-Allow-Origin」の問題について多くのフォーラムを読みました。ほとんどのフォーラムはdataType：'jsonp'の使用を求めていますが、通常、jsonpはGETリクエストをヒットします。私は、POSTリクエストを実行したいと思います。最終的にはGETリクエストも機能しません。

実際、私はiPhoneアプリをPhoneGapに変換しているので、objective-cコードをHTML-5とJquerymobileに書き直しています。私がヒットしようとしているURLは、Objective-cで非常にうまく機能します。

これがobjective-cコードです

NSString *username=[self urlEncodeValue:[userNameField.text stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]]];
NSString *password=[self urlEncodeValue:[passWordField.text stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]]];
NSString *params = [[NSString alloc] initWithFormat:@"username=%@&password=%@",username,password];

NSData *paramData = [params dataUsingEncoding:NSASCIIStringEncoding allowLossyConversion:YES];
[params release];
NSString *paramsLength = [NSString stringWithFormat:@"%d", [paramData length]];

NSString *urlString=[[NSString alloc] initWithFormat:@"%@?",[dict valueForKey:@"LoginAuthentication"]];

NSURL *authURL = [NSURL URLWithString:urlString];
[urlString release]; 

NSHTTPURLResponse *authenticationResponse= nil; 
NSMutableURLRequest *authenticationRequest = [NSMutableURLRequest requestWithURL:authURL];
[authenticationRequest setHTTPMethod:@"POST"];
[authenticationRequest setValue:paramsLength forHTTPHeaderField:@"Content-Length"];
[authenticationRequest setHTTPBody:paramData];
NSError *error = nil;
int errorCode;

NSData *responseData = [NSURLConnection sendSynchronousRequest:authenticationRequest  
          returningResponse:&authenticationResponse 
             error:&error]; 

if ([authenticationResponse respondsToSelector:@selector(allHeaderFields)]) {
    //success
}

上記のコードは非常にうまく機能します。

これが私がjavascriptに変換したコードで、「Access-Control-Allow-Origin」エラーが発生します

$(document).ready( function() {
    $.ajax({
        type: "POST",
        crossDomain: true,
        //dataType:'jsonp',
        //callback: '?',
        url : "https://externalserver.com/loginAuth?", 
            data : {'username' : 'username', 'password' : 'password'},
        success : function (response) {
            alert('login failed');
        }, 
        error: function(e){
            console.log(e);              
        }
    });
});

GET / POSTリクエストを試して、このローカルファイルをローカルサーバーで実行しようとしました。何も機能しません。

以下のエラーメッセージが表示されます

XMLHttpRequestはhttps://externalserver.com/loginAuth？をロードできません。Origin nullは、Access-Control-Allow-Originでは許可されていません。

XMLHttpRequestはhttps://externalserver.com/loginAuth？をロードできません。Origin nullは、Access-Control-Allow-Originでは許可されていません。

4

2 に答える 2

1

ブラウザでは、別のドメインからリソースを要求することはできません（画像とスクリプトファイルは、このルールの注目すべき例外です）。

これはいくつかの方法で解決できます。

  1. 最初の方法は、JSONP呼び出し（クロスドメインアクセスの現在の標準）を使用することです。はい、JSONPはGETのみを許可します。しかし、これはソリューションの一部にすぎません。クロスドメイン呼び出しを許可するには、サーバー側も変更する必要があります。

    javascriptから外部リソースにアクセスできるようにするため。リモートリソースは、応答ヘッダーにaccess-control-allow-originを含める必要があります。そのリソースを制御できる場合は、この応答ヘッダーを*（またはより制限されたアクセス制御が必要な場合はドメイン）に追加する必要があります。もちろん、このパートODソリューションは、サーバー側のアーキテクチャ（PHP、ASP.NET、JSP ...）に依存します。

    詳細に説明されているPHP/jQueryソリューションは次のとおりです：http ：//www.fbloggs.com/2010/07/09/how-to-access-cross-domain-data-with-ajax-using-jsonp-jquery-and- php /

    また、returnの結果はjsonpCallback関数にラップする必要があるため、returnは次のようになります。

    someFunction("{...}");

    someFunctionはコールバック関数の名前であり、従来のJSONは{....}です。ご覧のとおり、 someFunction（でラップされています。

    jQuery側は次のようになります。

    $.ajax({url: server_url,
    type: "GET",       
    data: save_data,
    dataType: "jsonp",
    jsonpCallback: 'successCallback',
    async: true,
    beforeSend: function() {

    },
    complete: function() {

    },
    success: function (result) {

    },
    error: function (request,error) {

    }, 
    successCallback:function(){

    }
});

    http://devlog.info/2010/03/10/cross-domain-ajax/

  2. またはプロキシソリューション。私はそれをテストしたことがないので、それについて書くつもりはありません。このソリューションは、サーバー側のコードにアクセスできない場合にのみ使用してください。

    http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html http://developer.yahoo.com/javascript/howto-proxy.html

于 2013-01-23T11:27:11.187 に答える
1

PhoneGapアプリは、ブラウザーではなくモバイルアプリとして扱われるため、クロスオリジンで問題ありません。このヘッダーを追加するには、サーバーコードを変更する必要があります

Access-Control-Allow-Origin: *

これにより、PhoneGapリクエストが送信されるものであるnullオリジンが許可されます。これは、JSONPを使用しなくても、GETリクエストとPOSTリクエストの両方で機能するはずです。

于 2013-01-23T12:35:32.300 に答える