クロスドメインの回避策 CORS をリクエストする

今回は、クロスドメイン ソリューション CORS をリクエストするための 注意事項 について説明します。実際のケースを見てみましょう。 Cross-Origin Resource

Sharing の正式名である

CORS は、HTML5 仕様で定義されているように、ドメインを越えてリソースにアクセスする方法です。

Origin は、ブラウザの現在のページのドメインであるこのドメインを表します。 JavaScript が外部ドメイン (sina.com など) へのリクエストを開始すると、レスポンスを受信した後、ブラウザはまず Access-Control-Allow-Origin にこのドメインが含まれているかどうかを確認します。今度は、クロスドメイン要求は成功します。そうでない場合、要求は失敗し、JavaScript は応答内のデータを取得できません。 Access-Control-Allow-Origin是否包含本域，如果是，则此次跨域请求成功，如果不是，则请求失败，JavaScript将无法获取到响应的任何数据。

简单请求包括GET、HEAD和POST（POST的Content-Type类型 仅限application/x-www-form-urlencoded、multipart/form-data和text/plain），并且不能出现任何自定义头（例如，X-Custom: 12345）

对于PUT、DELETE以及其他类型如application/json的POST请求，在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）到这个URL上，询问目标服务器是否接受：

浏览器确认服务器响应的Access-Control-Allow-Methods

単純なリクエストには GET、HEAD、POST が含まれます (POST の Content-Type は application/x-www-form-urlencoded に制限されています)コード >、multipart/form-data および text/plain)、カスタム ヘッダーは表示できません (例: X-Custom: 12345)

PUT の場合、DELETE、および application/json などのその他のタイプPOST リクエスト

では、AJAX リクエストを送信する前に、ブラウザはまず OPTIONS リクエスト (プリフライトと呼ばれます) を送信します。

ブラウザは、サーバー応答の Access-Control-Allow-Methods ヘッダーに AJAX のメソッドが実際に含まれていることを確認します。 AJAX を送信し続けるか、エラーをスローします

//express后端配置：app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Credentials","true");  //服务端允许携带cookie
    res.header("Access-Control-Allow-Origin", req.headers.origin);  //允许的访问域
    res.header("Access-Control-Allow-Headers", "X-Requested-With");  //访问头
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  //访问方法
    res.header("X-Powered-By",' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");    if (req.method == 'OPTIONS') {
        res.header("Access-Control-Max-Age", 86400);
        res.sendStatus(204); //让options请求快速返回.    }    else {
        next();
    }
});

🎜 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、php に注目してください。中国のウェブサイト🎜その他🎜関連記事！ 🎜🎜推奨書籍: 🎜🎜🎜JavaScript 文字列の使用方法🎜🎜🎜🎜🎜JavaScript 最適化 DOM🎜🎜🎜

以上がクロスドメインの回避策 CORS をリクエストするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。