前端登陆调用后端api总结

哈哈 阅读:179 2021-09-05 16:24:55 评论:0
本文章主要介绍了前端登陆调用后端api,具有不错的的参考价值,希望对您有所帮助,如解说有误或未考虑完全的地方,请您留言指出,谢谢!

前言

在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跨域访问引起的。所谓跨域就是,在IT虾米网域下,访问IT虾米网域下的资源;出于安全的考虑浏览器允许跨域写,而不允许跨域读,写就是上行(发送请求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" 
  1. 永久解决方法:安装django-cors-headers
pip install django-cors-headers 

在settings.py中增加:

INSTALLED_APPS = ( 
  ... 
  'corsheaders', 
  ... 
) 
  
... 
  
MIDDLEWARE  =  [   
    ...  
    'corsheaders.middleware.CorsMiddleware' , 
    'django.middleware.common.CommonMiddleware' , 
    ...  
] 
 
CORS_ORIGIN_ALLOW_ALL = True 

django-cors-headers详见:IT虾米网


标签:Python
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

关注我们