前言
在Django服务器端写了一个API，返回JSON格式数据。前端登陆页面通过Ajax调用该API。
实例
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>login</title>
</head>
<body>
<body>
<div id="center">
<form id="Form" >
账号 <input type="text" id="adminName" class="adminname" name="phone" value="" /> <br />
密码 <input type="password" id="psw" class="pwd" name="password" value="" /> <br />
<input type="button" value="登陆" onclick="testAjax()" />
</form>
</div>
<script src="js/ajax.js"></script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>
ajax.js
function testAjax() {
var adminName = document.getElementById('adminName').value;//获取html表单中adminName输入域对象的值，既账号
var psw = document.getElementById('psw').value;
var user={
phone:adminName,
password:psw,
};
$.ajax({
type:'POST',
data:JSON.stringify(user),
contentType :'application/json',
dataType:'json',
url :'api地址',
success :function(result){
if (result.status=="true"){
//输出响应的message信息
alert(result.message)
}else{
alert(result.message)
}
},
error: function(xmlHttpRequest, textStatus, errorThrown){
alert("请求对象XMLHttpRequest: "+XMLHttpRequest);
alert("错误类型textStatus: "+textStatus);
alert("异常对象errorThrown: "+errorThrown);
}
});
}
结果报错了。
错误信息：
Access to XMLHttpRequest at '服务器地址' from origin 'http://127.0.0.1:8848' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
百度半天是原来是因为跨域导致的。
原因
这是由于ajax跨域访问引起的。所谓跨域就是，在www.aaa.com域下，访问www.bbb.com域下的资源；出于安全的考虑浏览器允许跨域写，而不允许跨域读，写就是上行（发送请求send reques），读就是下行（接受响应receive response）。
解决方法
方法1. 给chrome浏览器添加参数
打开cmd命令进入chrome浏览器目录，执行以下命令
chrome.exe --disable-web-security --user-agent="Android" --user-data-dir="C:/temp-chrome-eng
mac系统
open -a Google\ Chrome --args --disable-web-security --user-data-dir="/Users/thantshweaung/Documents/Project/ionic/chrome_cache"
方法2. 使用JSONP
使用Ajax获取json数据时，存在跨域的限制。不过，在Web页面上调用js的script脚本文件时却不受跨域的影响，JSONP就是利用这个来实现跨域的传输。因此，我们需要将Ajax调用中的dataType从JSON改为JSONP（相应的API也需要支持JSONP）格式。JSONP只能用于GET请求。
方法3. 直接修改Django中的views.py文件
加上："Access-Control-Allow-Origin: *"
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 response
方法4. 安装django-cors-headers
pip install django-cors-headers
在settings.py中增加：
INSTALLED_APPS = (
...
'corsheaders',
...
)
...
MIDDLEWARE_CLASSES = (
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
)
django-cors-headers详见：https://github.com/ottoyiu/django-cors-headers/
网友评论