本文主要是介绍crsf-token表单防护，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
CRSF-Token
后端生成token
class CSRFTokenAPI(MethodView):def get(self):csrf_token = generate_csrf() # 生成CSRF令牌response = make_response(jsonify({'csrf_token': csrf_token}))# response.set_cookie(httponly=True, secure=True, samesite='None')return response
csrf_token_view = CSRFTokenAPI.as_view('csrf_token_api')
bp.add_url_rule('/get_csrf_token/', view_func=csrf_token_view, methods=['GET'])
前端，以登录为例
async getCsrfToken() {try {const headers = {'Content-Type': 'application/json','Access-Control-Allow-Origin':'*','Access-Control-Allow-Credentials':'true',};const response = await axios.get(`${this.backendurl}/user/get_csrf_token/`,{withCredentials: true})// console.log(response)this.csrf_token=response.data.csrf_token;console.log("getCsrfToken:",this.csrf_token)} catch (error) {console.error(error);}},
async login() {await this.getCsrfToken()//邮箱提示信息元素var email1_msg = this.$refs.email1_msg;//密码提示信息元素var pwd1_msg = this.$refs.pwd1_msg;//登录表单html元素var loginform = this.$refs.loginform;// console.log(this.backendurl)// console.log("login里面的方法:",this.csrf_token)//添加令牌到请求头中const headers = { 'X-CSRFToken': this.csrf_token,'Content-Type': 'application/json','Access-Control-Allow-Origin':'*','Access-Control-Allow-Credentials':'true',};await axios.post(`${this.backendurl}/user/login/`, this.user_form,{headers:headers,withCredentials:true})// .post(`${this.backendurl}/user/login/`, this.user_form).then((res) => {if (res.data["status"] === 200) {//从返回的数据中获取user_idvar user_id = res.data["user_id"];var username=res.data["user_name"]var email=res.data["email"]// console.log(user_id,username,email)var userinfo={'user_id':user_id,'username':username,'email':email}this.$store.commit("userinfo/saveuserinfo", userinfo);//将user_id转成string类型// user_id = String(user_id);// console.log(user_id)// //将user_id加密// var cipherText = CryptoJS.AES.encrypt(// user_id, "user_id" // ).toString();//存入cookie,参数：存入名称，存入值，存储时长// this.$cookies.set("user_id", cipherText,"24d");this.$router.push({name: "system",});} else {this.user_form.email = res.data["email"];this.user_form.password = res.data["password"];email1_msg.innerHTML = res.data["emailtip"];pwd1_msg.innerHTML = res.data["passwordtip"];loginform.classList.add("was-validated");}});},
注意一个要点，就是前端输入的url，要输入数字，不要用localhost，因为前后端的ip校验是文本校验，所以写localhost的话会有跨域问题。
这篇关于crsf-token表单防护的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
