解決ajax跨域問題(2-2)cors 阿新 • • 發佈：2018-12-05 https://www.cnblogs.com/2017Python/articles/7942124.html Ajax——Cors實現跨域ajax Cors實現跨域ajax，基本原理：客戶端不變，伺服器端在返回響應資料時，新增響應頭讓瀏覽器允許其通過， Cors實現跨域ajax很簡便，但不是所有瀏覽器都支援；sonp實現跨域，只能get請求； 一、瀏覽器傳送簡單請求：伺服器直接新增響應頭實現跨域 問：什麼是簡單請求？ 答：請求方式為head、get、post，且請求頭資訊滿足條件 客戶端傳送正常的ajax請求： html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> <input type="button" value="Ajax" onclick="DoAjax();" /> <script src="sss/jquery-1.12.4.min.js"></script> <script> function DoAjax(){ $.ajax({ url:'http://ajax2.com:8888/index', type:'POST', data:{'k1':'v1'}, success:function(arg){ console.log(arg); }, }); }; </script> </body> </html> 伺服器端新增響應頭實現跨域ajax： #!/usr/bin/env python # -*- coding:utf-8 -*- import tornado.ioloop import tornado.web class IndexHandler(tornado.web.RequestHandler): def get(self): self.write("ajax2_get") def post(self, *args, **kwargs): self.set_header('Access-Control-Allow-Origin','http://ajax1.com:8001') # 新增響應頭，允許指定域名的跨域請求 self.write("ajax2_post") # 路徑解析 settings = { "template_path":"views", "static_path":"statics", "static_url_prefix":"/sss/", } # 二級路由,先匹配域名, application = tornado.web.Application([ (r"/index",IndexHandler), ],**settings) # 開啟伺服器，監聽 if __name__ == "__main__": application.listen(8888) tornado.ioloop.IOLoop.instance().start() 二、瀏覽器傳送複雜請求，需要預檢，通過才可傳送正式請求 1、瀏覽器首先自動傳送一個option請求預檢，如果預檢通過，返回可接受的訪問方式， 2、按可接受的訪問方式進行正式的請求， 注意：無論是預檢還是正式的請求，都是以簡單請求為基礎的，每一次都需要允許域名跨域的響應頭， s_py #!/usr/bin/env python # -*- coding:utf-8 -*- import tornado.ioloop import tornado.web class IndexHandler(tornado.web.RequestHandler): def get(self): self.write("ajax2_get") # 簡單請求 def post(self, *args, **kwargs): # 新增響應頭，允許指定域名的跨域請求 # self.set_header('Access-Control-Allow-Origin','http://ajax1.com:8001，') # 可同時指定多個域名，用逗號隔開， self.set_header('Access-Control-Allow-Origin','*') # *表示所有域名都可以進行跨域申請 self.write("ajax2_post") # 複雜請求的預檢 def options(self, *args, **kwargs): self.set_header('Access-Control-Allow-Origin','*') # 指明允許請求的域名,可以是具體域名 self.set_header('Access-Control-Allow-Methods','PUT,DELETE') # 指明允許請求的方法，可多個，但不能是*， self.set_header('Access-Control-Allow-Headers','h1,h2,') # 指明允許通過的header，有時客戶端會設定， # self.set_header('Access-Control-Max-Age',10) # 設定有效時間，秒 # 複雜請求 def put(self, *args, **kwargs): self.set_header('Access-Control-Allow-Origin','*') self.write('put') # 路徑解析 settings = { "template_path":"views", "static_path":"statics", "static_url_prefix":"/sss/", } # 二級路由,先匹配域名, application = tornado.web.Application([ (r"/index",IndexHandler), ],**settings) # 開啟伺服器，監聽 if __name__ == "__main__": application.listen(8888) tornado.ioloop.IOLoop.instance().start() c_html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> <input type="button" value="SimpleAjaxCors" onclick="DoSimpleAjax();" /> <input type="button" value="ComplexAjaxCors" onclick="DoComplexAjax();" /> <script src="sss/jquery-1.12.4.min.js"></script> <script> function DoSimpleAjax(){ $.ajax({ url:'http://ajax2.com:8888/index', type:'POST', data:{'k1':'v1'}, success:function(arg){ console.log(arg); }, }); }; function DoComplexAjax(){ $.ajax({ url:'http://ajax2.com:8888/index', type:'PUT', data:{'k1':'v1'}, headers:{'h1':'xxoo'}, <!--需要伺服器端設定header--> success:function(arg){ console.log(arg); }, }); }; 三、cros方式傳送跨域Ajax，預設不傳遞cookie，需要客戶端攜帶cookie時，進行如下設定： （1）客戶端設定：xhrFields:{withCredentials:'true'}, 表明攜帶cookie， （2）伺服器端設定：self.set_header('Access-Control-Allow-Credentials','true') ，表明允許客戶端攜帶cookie， 注意：允許攜帶cookie時，必須制定域名，不能用*， 另外：jsonp方式跨域，預設傳遞cookie， 分類: Ajax < 2018年12月 > 日 一 二 三 四 五 六 25 26 27 28 29 30 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 3 4
