90

私は angular.js の初心者で、リクエストにいくつかのヘッダーを追加しようとしています:

   var config = {headers: {
            'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
            'Accept': 'application/json;odata=verbose'
        }
    };

   $http.get('https://www.example.com/ApplicationData.svc/Malls(1)/Retailers', config).success(successCallback).error(errorCallback);

私はすべてのドキュメントを見てきましたが、これは正しいはずだと私には思えます。

の URL にローカル ファイルを使用すると$http.get、Chrome の [ネットワーク] タブに次の HTTP 要求が表示されます。

GET /app/data/offers.json HTTP/1.1
Host: www.example.com
Connection: keep-alive
Cache-Control: max-age=0
If-None-Match: "0f0abc9026855b5938797878a03e6889"
Authorization: Basic Y2hhZHN0b25lbWFuOkNoYW5nZV9tZQ==
Accept: application/json;odata=verbose
X-Requested-With: XMLHttpRequest
If-Modified-Since: Sun, 24 Mar 2013 15:58:55 GMT
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
X-Testing: Testing
Referer: http://www.example.com/app/index.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

ご覧のとおり、両方のヘッダーが正しく追加されています。しかし、URL を$http.get上記のように変更すると (example.com ではなく実際のアドレスを使用する場合を除く)、次のようになります。

OPTIONS /ApplicationData.svc/Malls(1) HTTP/1.1
Host: www.datahost.net
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://mpon.site44.com
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
Access-Control-Request-Headers: accept, origin, x-requested-with, authorization, x-testing
Accept: */*
Referer: http://mpon.site44.com/app/index.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

これら 2 つのコードの唯一の違いは、1 つ目は URL がローカル ファイルであり、2 つ目は URL がリモート サーバーであることです。2 番目の Request ヘッダーを見ると、Authentication ヘッダーがAcceptなく、指定されたものではなくデフォルトを使用しているように見えます。また、最初の行はOPTIONS代わりに言うようになりましたGET(しかしAccess-Control-Request-Methodis GET)。

上記のコードの何が問題なのか、またはローカル ファイルをデータ ソースとして使用しない場合に追加のヘッダーを追加する方法を教えてください。

4

9 に答える 9

66

X-Testing私はあなたが持っていたものを取り、別のヘッダーを追加しました

var config = {headers:  {
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json;odata=verbose',
        "X-Testing" : "testing"
    }
};

$http.get("/test", config);

Chrome のネットワーク タブでは、それらが送信されていることがわかります。

GET /test HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Accept: application/json;odata=verbose
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22
Authorization: Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==
X-Testing: testing
Referer: http://localhost:3000/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

ブラウザから、またはサーバー上でそれらを表示していませんか? ブラウザー ツールまたはデバッグ プロキシを試して、何が送信されているかを確認してください。

于 2013-03-24T14:16:53.713 に答える
21

HTTP POST メソッドを使用した基本認証:

$http({
    method: 'POST',
    url: '/API/authenticate',
    data: 'username=' + username + '&password=' + password + '&email=' + email,
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        "X-Login-Ajax-call": 'true'
    }
}).then(function(response) {
    if (response.data == 'ok') {
        // success
    } else {
        // failed
    }
});

...そしてヘッダー付きの GET メソッド呼び出し:

$http({
    method: 'GET',
    url: '/books',
    headers: {
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json',
        "X-Login-Ajax-call": 'true'
    }
}).then(function(response) {
    if (response.data == 'ok') {
        // success
    } else {
        // failed
    }
});
于 2016-01-01T16:45:16.487 に答える
9

カスタム ヘッダーをすべてのリクエストに追加する場合は、$httpProvider のデフォルトを変更して、常にこのヘッダーを追加することができます…</p> 

app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.headers.common = { 
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json;odata=verbose'
      };
}]);
于 2015-11-21T08:04:36.100 に答える
7

私の提案は、関数内にこのような関数呼び出し設定を追加し、それに適したヘッダーをチェックすることです。きっとうまくいくと思います。それは私にとって完全に機能しています。

function getSettings(requestData) {
    return {
        url: requestData.url,
        dataType: requestData.dataType || "json",
        data: requestData.data || {},
        headers: requestData.headers || {
            "accept": "application/json; charset=utf-8",
            'Authorization': 'Bearer ' + requestData.token
        },
        async: requestData.async || "false",
        cache: requestData.cache || "false",
        success: requestData.success || {},
        error: requestData.error || {},
        complete: requestData.complete || {},
        fail: requestData.fail || {}
    };
}

次に、このようにデータを呼び出します

    var requestData = {
        url: 'API end point',
        data: Your Request Data,
        token: Your Token
    };

    var settings = getSettings(requestData);
    settings.method = "POST"; //("Your request type")
    return $http(settings);
于 2015-01-07T11:11:45.910 に答える
2

OPTIONS リクエストに表示される内容は問題ありません。認証ヘッダーは公開されません。

ただし、基本認証が機能するためには、次を追加する必要がありwithCredentials = true;ますvar config。

AngularJS $http ドキュメントから:

withCredentials - - XHR オブジェクトにフラグ{boolean}を設定するかどうか。withCredentials詳細については、認証情報を含むリクエストを参照してください。

于 2013-03-24T16:58:57.440 に答える
1

Chrome は、CORS ヘッダーを探すためにリクエストをプリフライトしています。リクエストが受け入れられる場合は、実際のリクエストを送信します。このクロスドメインを実行している場合は、単にそれに対処するか、リクエストを非クロスドメインにする方法を見つける必要があります。これは仕様によるものです。

単純なリクエスト (上記で説明) とは異なり、「プリフライト」リクエストは、実際のリクエストが安全に送信できるかどうかを判断するために、最初に OPTIONS メソッドによって他のドメインのリソースに HTTP リクエストを送信します。クロスサイト リクエストは、ユーザー データに影響を与える可能性があるため、このようにプリフライトされます。特に、次の場合、リクエストはプリフライトされます。

GET、HEAD、または POST 以外のメソッドを使用します。また、POST を使用して、application/x-www-form-urlencoded、multipart/form-data、または text/plain 以外の Content-Type を持つリクエスト データを送信する場合 (たとえば、POST リクエストが XML ペイロードをサーバーに送信する場合) application/xml または text/xml を使用すると、リクエストがプリフライトされます。リクエストにカスタム ヘッダーを設定します (たとえば、リクエストは X-PINGOTHER などのヘッダーを使用します)。

参照: GET/POST/PUT/DELETE の代わりに OPTIONS を送信する Chrome の AJAX?

于 2016-02-08T12:52:40.527 に答える
1

そして、サーバーからの答えは何ですか？204 を返信し、要求している GET を実際に送信する必要があります。

OPTIONS では、クライアントはサーバーが CORS リクエストを許可しているかどうかを確認しています。204 以外の値が返される場合は、正しい Allow-Origin ヘッダーを送信するようにサーバーを構成する必要があります。

ヘッダーを追加する方法は、それを行う正しい方法です。

于 2013-06-24T19:10:57.400 に答える
0

サーバーが許可しないヘッダーを追加しているだけです。

例-サーバーは、これらのヘッダーのみを許可するようにCORSを設定しています（accept、cache-control、pragma、content-type、origin）

そして、あなたのhttpリクエストでは、このように追加しています

 headers: {
        'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json',
        'x-testing': 'testingValue'
    }

(認証と x テスト) が許可されていないため、サーバーはこの要求を拒否します。

これはサーバー側の構成です。

HTTP オプションとは何の関係もありません。サーバーが実際の呼び出しを許可するかどうかを確認するために、別のドメインからのサーバーへのプリフライトにすぎません。

于 2020-12-30T08:03:08.847 に答える
-9

私にとっては、次の説明のスニペットが機能しました。'おそらく、ヘッダー名には使用しないでください。

{
   headers: { 
      Authorization: "Basic " + getAuthDigest(), 
      Accept: "text/plain" 
   }
}

を使用し$http.ajax()ていますが、それがゲームチェンジャーになるとは思いません。

于 2013-03-24T13:42:01.763 に答える