开发网站大概要多少钱,宁波网站建设推广,宜昌便宜做网站,企业中征码查询入口一、为什么会有跨域问题#xff1f; 是因为浏览器的同源策略是对ajax请求进行阻拦了#xff0c;但是不是所有的请求都给做跨域#xff0c;像是一般的href属性#xff0c;a标签什么的都不拦截。 二、解决跨域问题的两种方式 JSONPCORS 三、JSONP 先简单来说一下JSONP#x… 一、为什么会有跨域问题 是因为浏览器的同源策略是对ajax请求进行阻拦了但是不是所有的请求都给做跨域像是一般的href属性a标签什么的都不拦截。 二、解决跨域问题的两种方式 JSONPCORS 三、JSONP 先简单来说一下JSONP具体详细详见上面JSONP JSONP是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。创建一个回调函数然后在远程服务上调用这个函数并且将json数据形式作为参数传递完成回调。 四、CORS跨域 随着技术的发展现在的浏览器可以主动支持设置从而允许跨域请求即跨域资源共享CORSCross-Origin Resource Sharing其本质是设置响应头使得浏览器允许跨域请求。 1、简单请求和复杂请求 条件1、请求方式HEAD、GET、POST2、请求头信息AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type 对应的值是以下三个中的任意一个application/x-www-form-urlencodedmultipart/form-datatext/plain注意同时满足以上两个条件时则是简单请求否则为复杂请求 2、简单请求和复杂请求的区别 简单请求一次请求 非简单请求两次请求在发送数据之前会先发第一次请求做‘预检’只有‘预检’通过后才再发送一次请求用于数据传输。 3、关于预检 - 请求方式OPTIONS - “预检”其实做检查检查如果通过则允许传输数据检查不通过则不再发送真正想要发送的消息 - 如何“预检” 如果复杂请求是PUT等请求则服务端需要设置允许某请求否则“预检”不通过Access-Control-Request-Method 如果复杂请求设置了请求头则服务端需要设置允许某请求头否则“预检”不通过Access-Control-Request-Headers 4、CORS的优缺点 CORS的优点可以发任意请求CORS的缺点上是复杂请求的时候得先做个预检再发真实的请求。发了两次请求会有性能上的损耗五、JSONP和CORS的区别 JSONP服务端不用修改需要改前端。发jsonp请求 JSONP只能发GET请求 CORS前端的代码不用修改服务端的代码需要修改。如果是简单请求的话在服务端加上一个响应头。 CORS可以发任意请求 六、基于CORS实现ajax请求 1、支持跨域简单请求 客户端 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 meta http-equivX-UA-Compatible contentIEedge6 meta nameviewport contentwidthdevice-width7 titleTitle/title8 /head9 body 10 div 11 h1欢迎来到我的主页/h1 12 button οnclickgetData()获取用户数据/button 13 /div 14 script src/static/jquery-1.12.4.min.js/script 15 script 16 function getData() { 17 $.ajax({ 18 url:http://127.0.0.1:8080/index/, 19 type:GET, 20 success:function (data) { 21 console.log(data) 22 } 23 24 }) 25 } 26 /script 27 /body 28 /html index.html 服务端 1 from django.shortcuts import render2 from django.http import JsonResponse3 from rest_framework.views import APIView4 5 # Create your views here.6 class IndexView(APIView):7 def get(self,request,*args,**kwargs):8 ret {9 code: 111, 10 data: 你好吗 11 } 12 response JsonResponse(ret) 13 response[Access-Control-Allow-Origin] * 14 return response views.py 2、支持跨域复杂请求 如果是复杂请求在你真正的发请求之前会先偷偷的发一个OPTION请求先预检一下我 允许你来你才来 如果想预检通过就得写个option请求 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 meta http-equivX-UA-Compatible contentIEedge6 meta nameviewport contentwidthdevice-width7 titleTitle/title8 /head9 body 10 input typebutton value获取用户数据 οnclickgetUser() 11 script src/static/jquery-1.12.4.min.js/script 12 script 13 function getUser() { 14 $.ajax({ 15 url:http://127.0.0.1:8080/user/, 16 type:POST, 17 data:{k1:v1}, 18 headers:{ 19 h1:sdfdgfdg 20 }, 21 success:function (ret) { 22 console.log(ret) 23 } 24 }) 25 } 26 /script 27 /body 28 /html user.html 1 from django.shortcuts import render,HttpResponse2 from django.http import JsonResponse3 from rest_framework.views import APIView4 5 class UserIndex(APIView):6 def get(self,request,*args,**kwargs):7 ret {8 code: 111,9 data: 你好吗 10 } 11 response JsonResponse(ret) 12 response[Access-Control-Allow-Origin] * 13 return response 14 15 def post(self,request,*args,**kwargs): 16 print(request.POST.get(k1)) 17 ret { 18 code:1000, 19 data:过年啦, 20 } 21 response JsonResponse(ret) 22 response[Access-Control-Allow-Origin] * 23 return response 24 25 def options(self, request, *args, **kwargs): 26 # self.set_header(Access-Control-Allow-Origin, http://www.xxx.com) 27 # self.set_header(Access-Control-Allow-Headers, k1,k2) 28 # self.set_header(Access-Control-Allow-Methods, PUT,DELETE) 29 # self.set_header(Access-Control-Max-Age, 10) 30 31 response HttpResponse() 32 response[Access-Control-Allow-Origin] * 33 response[Access-Control-Allow-Headers] h1 34 # response[Access-Control-Allow-Methods] PUT 35 return response 服务端 由于复杂请求时首先会发送“预检”请求如果“预检”成功则发送真实数据。 “预检”请求时允许请求方式则需服务器设置响应头Access-Control-Request-Method“预检”请求时允许请求头则需服务器设置响应头Access-Control-Request-Headers“预检”缓存时间服务器设置响应头Access-Control-Max-Age3、跨域获取响应头 默认获取到的所有响应头只有基本信息如果想要获取自定义的响应头则需要再服务器端设置Access-Control-Expose-Headers。 1 !DOCTYPE html2 html3 head langen4 meta charsetUTF-85 title/title6 /head7 body8 9 p 10 input typesubmit οnclickXmlSendRequest(); / 11 /p 12 13 p 14 input typesubmit οnclickJqSendRequest(); / 15 /p 16 17 script typetext/javascript srcjquery-1.12.4.js/script 18 script 19 function XmlSendRequest(){ 20 var xhr new XMLHttpRequest(); 21 xhr.onreadystatechange function(){ 22 if(xhr.readyState 4) { 23 var result xhr.responseText; 24 console.log(result); 25 // 获取响应头 26 console.log(xhr.getAllResponseHeaders()); 27 } 28 }; 29 xhr.open(PUT, http://c2.com:8000/test/, true); 30 xhr.setRequestHeader(k1, v1); 31 xhr.send(); 32 } 33 34 function JqSendRequest(){ 35 $.ajax({ 36 url: http://c2.com:8000/test/, 37 type: PUT, 38 dataType: text, 39 headers: {k1: v1}, 40 success: function(data, statusText, xmlHttpRequest){ 41 console.log(data); 42 // 获取响应头 43 console.log(xmlHttpRequest.getAllResponseHeaders()); 44 } 45 }) 46 } 47 48 49 /script 50 /body 51 /html 52 53 HTML a.html 1 class MainHandler(tornado.web.RequestHandler):2 3 def put(self):4 self.set_header(Access-Control-Allow-Origin, http://www.xxx.com)5 6 self.set_header(xxoo, seven)7 self.set_header(bili, daobidao)8 9 self.set_header(Access-Control-Expose-Headers, xxoo,bili) 10 11 12 self.write({status: true, data: seven}) 13 14 def options(self, *args, **kwargs): 15 self.set_header(Access-Control-Allow-Origin, http://www.xxx.com) 16 self.set_header(Access-Control-Allow-Headers, k1,k2) 17 self.set_header(Access-Control-Allow-Methods, PUT,DELETE) 18 self.set_header(Access-Control-Max-Age, 10) 19 20 Tornado views.py 4、跨域传输cookie 在跨域请求中默认情况下HTTP Authentication信息Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。 如果想要发送 浏览器端XMLHttpRequest的withCredentials为true服务器端Access-Control-Allow-Credentials为true注意服务器端响应的 Access-Control-Allow-Origin 不能是通配符 * 1 !DOCTYPE html2 html3 head langen4 meta charsetUTF-85 title/title6 /head7 body8 9 p 10 input typesubmit οnclickXmlSendRequest(); / 11 /p 12 13 p 14 input typesubmit οnclickJqSendRequest(); / 15 /p 16 17 script typetext/javascript srcjquery-1.12.4.js/script 18 script 19 function XmlSendRequest(){ 20 var xhr new XMLHttpRequest(); 21 xhr.onreadystatechange function(){ 22 if(xhr.readyState 4) { 23 var result xhr.responseText; 24 console.log(result); 25 } 26 }; 27 28 xhr.withCredentials true; 29 30 xhr.open(PUT, http://c2.com:8000/test/, true); 31 xhr.setRequestHeader(k1, v1); 32 xhr.send(); 33 } 34 35 function JqSendRequest(){ 36 $.ajax({ 37 url: http://c2.com:8000/test/, 38 type: PUT, 39 dataType: text, 40 headers: {k1: v1}, 41 xhrFields:{withCredentials: true}, 42 success: function(data, statusText, xmlHttpRequest){ 43 console.log(data); 44 } 45 }) 46 } 47 48 49 /script 50 /body 51 /html 52 53 HTML b.html 1 class MainHandler(tornado.web.RequestHandler):2 3 def put(self):4 self.set_header(Access-Control-Allow-Origin, http://www.xxx.com)5 self.set_header(Access-Control-Allow-Credentials, true)6 7 self.set_header(xxoo, seven)8 self.set_header(bili, daobidao)9 self.set_header(Access-Control-Expose-Headers, xxoo,bili) 10 11 self.set_cookie(kkkkk, vvvvv); 12 13 self.write({status: true, data: seven}) 14 15 def options(self, *args, **kwargs): 16 self.set_header(Access-Control-Allow-Origin, http://www.xxx.com) 17 self.set_header(Access-Control-Allow-Headers, k1,k2) 18 self.set_header(Access-Control-Allow-Methods, PUT,DELETE) 19 self.set_header(Access-Control-Max-Age, 10) views.py   转载于:https://www.cnblogs.com/zhangningyang/p/8471755.html