AJAX 呼び出し用の API を作成するときに Django で発生するクロスドメインの問題を考慮して、AJAX クロスドメイン アクセスの問題、特にオープンソースとして共有されている django-cors-headers の使用を解決するための Python の Django アプリケーションの方法をまとめてみましょう。
はじめに
Django を使用してサーバー側で API を作成し、JSON データを返します。 Ajax を使用して API を呼び出します:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>test</title>
</head>
<body>
<button onclick="showPersonInfo()">点我获取数据</button>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
function showPersonInfo(){
$.getJSON(
'http://xxx/account/getuserinfo/',
{username: "abc"},
function(json) {
var html='<br>'+'用户名：'+json.username+'<br>'+'姓：'+json.first_name+'<br>'+'名:'+json.last_name+'<br>'+'邮箱'+json.email;
document.write(html);
}
)
}
</script>
</html> ただし、Chrome ブラウザではエラーが表示されます:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Google で調べたところ、この問題は CORS が原因であることがわかりました。
CORSとは何ですか?
CORS (Cross-Origin Resource Sharing) は、Ajax がクロスドメイン アクセスを実現できるようにするクロスドメイン アクセス メカニズムです。
実際には、サーバーの応答ヘッダーに「Access-Control-Allow-Origin: *」を追加して CORS をサポートします。apache/nginx の設定方法などは、参考ドキュメントを参照してください。
例:
API は DomainA にデプロイされ、
Ajax ファイルは DomainB にデプロイされ、Ajax ファイルは API にリクエストを送信し、
を通じて DomainB の Ajax ファイルにアクセスします。 DomainC. データのリクエスト
上記のプロセスでクロスドメイン アクセスが発生します。 Ajax を直接使用してリクエストすると、Chrome のプロンプトが表示され、失敗します:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Ajax クロスドメイン アクセスの問題を解決するにはどうすればよいですか?
クロスドメインの問題を解決するには、2 つの方法があります: 1. jsonp を使用する 2. CORS を有効にする
jsonp メソッドを使用するには、サーバーに応答を jsonp 形式で戻す必要があります。たとえば、Django は次のことを行うことができます。 //m.sbmmt.com/ などの jsonp 関連のデコレータを追加します。この方法はあまり好きではないので、ここでは省略します。後で参考資料を参照してください。
CORS を使用する: 現在、ほとんどのブラウザーが CORS をサポートしており、他のユーザーが呼び出すことができるように完全にオープンになっているため、CORS を使用することをお勧めします。
1. JSONP の使用
Ajax を使用して json データを取得する場合、クロスドメインの制限があります。ただし、Web ページ上で js スクリプト ファイルを呼び出す場合、JSONP はこれを使用してクロスドメイン送信を実現します。したがって、Ajax 呼び出しの dataType を JSON から JSONP 形式に変更する必要があります (対応する API も JSONP をサポートする必要があります)。
JSONP は GET リクエストにのみ使用できます。
2. Django で views.py ファイルを直接変更します。
他のドメインが Ajax 経由でデータをリクエストできるように、views.py の対応する API 実装関数を変更します:
def myview(_request):
response = HttpResponse(json.dumps({"key": "value", "key2": "value"}))
response["Access-Control-Allow-Origin"] = "*"
response["Access-Control-Allow-Methods"] = "POST, GET, OPTIONS"
response["Access-Control-Max-Age"] = "1000"
response["Access-Control-Allow-Headers"] = "*"
return response3. - cors-headers
ここでまた発見がありました！ Django では、誰かが CORS ヘッダー ミドルウェアを開発しました。settings.py でいくつかの簡単な設定を行うだけで、これを使用できるようになり、サーバー側が完全にオープンになります。 CORS をオンにすると、クロスドメインの心配がなくなります。 ~ django-cors-headers をインストールします:
pip install django-cors-headers
INSTALLED_APPS = ( ... 'corsheaders', ... ) ... MIDDLEWARE_CLASSES = ( ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ... )
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
