4

BackboneとSlimPHPフレームワークを使用しています。APIに情報を投稿しようとしていますが、Access-Control-Allow-Headersが問題を引き起こし続けています...

私のコンソールは次のように読みます。

    OPTIONS http://api.barholla.com/user/auth 405 (Method Not Allowed) zepto.min.js:2
XMLHttpRequest cannot load http://api.barholla.com/user/auth. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

私のヘッダーは次のとおりです。

Request URL:http://api.barholla.com/user/auth
Request Method:OPTIONS
Status Code:405 Method Not Allowed
Request Headersview source
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:origin, content-type, accept
Access-Control-Request-Method:POST
Connection:keep-alive
Host:api.barholla.com
Origin:http://localhost
Referer:http://localhost/barholla/app/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4
Response Headersview source
Access-Control-Allow-Origin:*
Allow:POST
Connection:close
Content-Type:application/json
Date:Thu, 08 Nov 2012 16:12:32 GMT
Server:Apache
Transfer-Encoding:chunked
X-Powered-By:Slim
X-Powered-By:PleskLin

スリムなindex.phpファイルのヘッダーは次のとおりです。

$res = $app->response();
$res->header('Access-Control-Allow-Origin', '*');
$res->header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS");

投稿データを処理するには：

$app->post('/user/auth', function () use ($app) {
//code here
});

私のjavascript（私はバックボーンフレームワークを使用しています）では、私のコードは次のとおりです。

 App.userAuth = new App.UserAuthModel({
  username: $('#username').val(),
  password: hex_md5($('#password').val())
});

App.userAuth.save({}, {
  success: function(model, resp) {
    console.log(resp);
  },
  error: function(model, response) {
    console.log(response);
  }
});

どんな助けでも大歓迎です、私は何年もの間これに固執してきました！

4

4 に答える 4

17

同様のクロスドメインのPOST問題がありました（実際には、を除くすべてのヘッダーでGET）。以下はそれを解決しました：

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']) && (   
       $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'] == 'POST' || 
       $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'] == 'DELETE' || 
       $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'] == 'PUT' )) {
             header('Access-Control-Allow-Origin: *');
             header("Access-Control-Allow-Credentials: true"); 
             header('Access-Control-Allow-Headers: X-Requested-With');
             header('Access-Control-Allow-Headers: Content-Type');
             header('Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT'); // http://stackoverflow.com/a/7605119/578667
             header('Access-Control-Max-Age: 86400'); 
      }
  exit;
}
于 2012-11-23T13:42:14.780 に答える
5

JavaScript クライアントでは、 /user/authに対して OPTIONS リクエストを作成していますが、PHP コードでは、このエンドポイントを介して POST リクエストのみを受け入れています。

API で OPTIONS メソッドを受け入れたい場合は、コードに次のようなものを含める必要があります。

$app->options('/user/auth', function () use ($app) {
    //code here
});

または、同じ関数で複数の HTTP メソッドを処理する場合:

$app->map('/user/auth', function () use ($app) {
    if ($app->request()->isOptions()) {
        //handle options method
    }

    else if ($app->request()->isPost()) {
        //handle post method
    }
})->via('POST', 'OPTIONS');

W3C によると、 OPTIONS メソッドは次のことに注意してください。

[...] は、Request-URI によって識別される要求/応答チェーンで使用可能な通信オプションに関する情報の要求を表します。このメソッドにより、クライアントは、リソースのアクションを示唆したり、リソースの取得を開始したりすることなく、リソースに関連付けられたオプションや要件、またはサーバーの機能を判断できます。

または、クライアントのコードを変更して、OPTIONS リクエストの代わりに POST リクエストを作成するだけです。OPTIONS メソッドを使用してユーザーを認証するよりも簡単で理にかなっています。zepto.js では、次のようになります。

$.post('/user/auth', { foo: 'bar' }, function(response){ 
    console.log(response);
});
于 2012-11-23T12:32:56.330 に答える
3

OPTIONS リクエストは、空のレスポンスを返す 200 である必要があります。次に、ブラウザは実際の POST リクエストを送信します。

Access-Control-Allow-Methodsまた、ヘッダーに OPTIONS を追加する必要はありません。

認証を使用しているようです。Access-Control-Allow-Credentialsヘッダーも追加してみませんか。

詳細については、このコードを確認してください。役立つ場合があります。

于 2012-11-09T00:33:15.550 に答える