系統結構:
後端:python中tornado
前端:vue.js
主要問題:跨域問題和json收發
1、跨域問題(python中tornado中設定):
後端:1>實現options方法
2>設定相關允許的頭域
def set_default_headers(self):
print "setting headers!!!"
self.set_header("access-control-allow-origin", "*")
self.set_header("access-control-allow-credentials", "true")
self.set_header("access-control-allow-methods", "*")
self.set_header("access-control-allow-headers", "x-requested-with,content-type,access-token")
self.set_header("access-control-expose-headers", "*")
# self.set_header('access-control-allow-methods', 'post, get, options')
def options(self):
# no body
# self.set_default_headers()
self.set_status(204)
self.finish()
前端(vue):
>2、注意:
1>vue使用axios傳送http請求,對應的main.js設定如下:
queryresult在中傳送使用this,另外進入請求作用域不同,需要設定到乙個變數上,然後通過bind方法設定進去,否則的話會傳送訪問不到result物件
2>json解析
a)json.stringify(response.data, null, 4)和json.stringify(object)方法
b)js中宣告乙個物件設定對應的屬性,很方便的就完成了json的生成
3、遺留問題:
當前還沒有使用vue的過濾器,後續學習
4、參考文章
ajax跨域,這應該是最全的解決方案了
前端ajax請求跨域時遇到的一些坑
js中幾種實用的跨域方法原理詳解
如何解決出現axios的request header field content-type is not allowed by access-control-allow-headers in preflight response.
js操作json
vue 傳送ajax請求
使用axios傳送ajax請求 1 安裝axios並引入 3 通過script src的方式進行檔案的引入 2 傳送get請求 1 基本使用格式 格式1 axios options 這種格式直接將所有資料寫在options裡,options其實是個字典 格式2 axios.get url optio...
vue傳送ajax請求
建立乙個django工程,例如 login.建立完成之後,再建立乙個子應用,例如users.最後再設定一下模板檔案 在模板檔案中建立乙個axios.html,內容如下 登入 delimiters data 建立檢視並載入模板的html url設定 from django.conf.urls impo...
ajax利用json傳送 接收資料
此函式等價於document.getelementbyid document.all function s else 建立 xmlhttprequest物件,以傳送ajax請求 傳送ajax處理請求 這裡簡單驗證使用者名稱和密碼的有效性,預設正確的輸入 使用者名稱和密碼都是test function...