####ネイティブJSは、一般的なHTTPリクエスト（GET、POST）を実装しました
// 常用工具函数
var tools = {
/* ajax请求get
* @param url string 请求的路径
* @param query object 请求的参数query
* @param succCb function 请求成功之后的回调
* @param failCb function 请求失败的回调
* @param isJson boolean true： 解析json false：文本请求 默认值true
*/
ajaxGet: function (url, query, succCb, failCb, isJson) {
// 拼接url加query
if (query) {
var parms = tools.formatParams(query);
url += '?' + parms;
// console.log('-------------',url);
}
// 1、创建对象
var ajax = new XMLHttpRequest();
// 2、建立连接
// true:请求为异步 false:同步
ajax.open("GET", url, true);
// ajax.setRequestHeader("Origin",STATIC_PATH);
// ajax.setRequestHeader("Access-Control-Allow-Origin","*");
// // 响应类型
// ajax.setRequestHeader('Access-Control-Allow-Methods', '*');
// // 响应头设置
// ajax.setRequestHeader('Access-Control-Allow-Headers', 'x-requested-with,content-type');
// ajax.withCredentials = true;
// 3、发送请求
ajax.send(null);
// 4、监听状态的改变
ajax.onreadystatechange = function () {
if (ajax.readyState === 4) {
if (ajax.status === 200) {
// 用户传了回调才执行
// isJson默认值为true，要解析json
if (isJson === undefined) {
isJson = true;
}
var res = isJson ? JSON.parse(ajax.responseText == "" ? '{}' : ajax.responseText) : ajax.responseText;
succCb && succCb(res);
} else {
// 请求失败
failCb && failCb();
}
}
}
},
/* ajax请求post
* @param url string 请求的路径
* @param data object 请求的参数query
* @param succCb function 请求成功之后的回调
* @param failCb function 请求失败的回调
* @param isJson boolean true： 解析json false：文本请求 默认值true
*/
ajaxPost: function (url, data, succCb, failCb, isJson) {
var formData = new FormData();
for (var i in data) {
formData.append(i, data[i]);
}
//得到xhr对象
var xhr = null;
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("post", url, true);
// 设置请求头 需在open后send前
// 这里的CSRF需自己取后端获取，下面给出获取代码
xhr.setRequestHeader("X-CSRFToken", CSRF);
xhr.send(formData);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 判断isJson是否传进来了
isJson = isJson === undefined ? true : isJson;
succCb && succCb(isJson ? JSON.parse(xhr.responseText) : xhr.responseText);
}
}
}
},
}
// 调用
// 接口地址
let url = ""
// 传输数据 为object
let data = {}
tools.ajaxGet(url, data, function(res){
console.log('返回的数据:',res)
// ....
})
CSRFコードを取得
- ここのための
Django一例
from django.template.context_processors import csrf
def get_csrf(request):
# 生成 csrf 数据，发送给前端
x = csrf(request)
csrf_token = x['csrf_token']
# 这里的csrf_token 是一个对象 需要强转一下
print('csrf_token:',csrf_token)
return AccessReturn({'code': 0, 'msg': 'success', 'data': str(csrf_token)})
# 允许跨域
def AccessReturn(result_dict):
response = HttpResponse(json.dumps(result_dict))
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 response
CORS （Corss-Orignリソースの共有）クロスドメイン
| 名前 | 必須 | 注釈 |
|---|---|---|
| アクセス制御 - 許可 - 起源 | 必須の | 以下のような要求されたドメイン、許可：ローカルホストのか、*すべての許可 |
| アクセス制御 - 許可 - メソッド | 必須の | GET、POST、PUT、削除：この方法は、次のような、要求を許可され 、 コンマ複数の分離; *すべて許可します |
| アクセス制御 - 許可 - ヘッダ | オプショナル | プリフライトリクエストの後、いくつかの頭を必要と通知するためにリクエストを送ります |
| アクセス制御 - 露光 - ヘッダ | オプショナル | 最後は、修飾のCache-Control、コンテンツ言語、コンテンツの種類、有効期限、プラグマ：;カスタムフィールド要求に応じてCORSは、XMLHttpRequestのデフォルトは6つの基本的なフィールドを受け取ります。あなたが他のフィールドを取得したい場合は、アクセス・コントロール・公開・ヘッダ内部で指定する必要があります |
| アクセス・コントロール・マックスエイジ | オプショナル | プリフライト有効な、単位：秒は、プリフライトの生活の中で他を発行する必要はありません。 |
| Access-Control-Allow-Credentials | オプショナル | クッキーは、デフォルトではfalseで、送信を許可するかどうかを示します。このようプットまたは削除、持っている特別な要件などのアプリケーション/ JSONのコンテンツタイプをtrueに設定する必要がある場合 |
