不需要设置前端太多,只需要在服务端是在请求头,使服务端的回复数据可以正常通过浏览器的限制,进入网站

首先说下简单请求和非简单请求:

简单请求:必须满足下列条件

1.请求方式:head,get,post

2.请求头

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type:其对应值限制为3个application/x-www-form-urlencoded,multipart/form-data,text/plain

必须同时满足上面的两个条件叫做简单请求

简单请求:跨站请求时只需要一次请求

非简单请求:两次请求,在发送请求之前会先发送一次请求(预检),通过预检的才能再次发送一次请求进行数据传输

一:简单请求

前端:正常设置信息

    function CorsAjax(){
$.ajax({
url:'http://www.py_test2.com:8081/cors',
dataType:'text',
data:{},
type:"post",
success:function(data){
console.log(data);
}
})
}

后台服务端(跨域方)需要设置请求头:

    #简单请求
def post(self, *args, **kwargs):
self.set_header('Access-Control-Allow-Origin',"http://www.py_test1.com:8080,http://www.py_test1.com:8080")#设置一个或多个都可以,或者加上*代表所有的都允许
self.write('{"status":1,"message":"post"}')

二:复杂请求:需要先发送一次预检

而预检的请求方式为options,所以我们需要在服务端设置一个options请求来处理预检信息

1.当前端的请求方式不满足条件时:

    //复杂请求,会发送两个请求,一个options一个put
function CorsAjax2(){
$.ajax({
url:'http://www.py_test2.com:8081/cors',
dataType:'text',
data:{},
type:"put",
success:function(data){
console.log(data);
}
})
}

需要在服务端设置预检

    #复杂请求
def options(self, *args, **kwargs):#第一次用于预检
#先允许网站接入
self.set_header('Access-Control-Allow-Origin', "http://www.py_test1.com:8080")
#若是请求方法不满足get,post,head
self.set_header('Access-Control-Allow-Methods',"PUT,DELETE")#还可以添加其他,比如DELETE,不能是*
    def put(self, *args, **kwargs):#第二次为请求,用于数据传输
       self.set_header('Access-Control-Origin','http://www.py_test1.com:8080') #也要设置源地址
self.write('put ok')

2.当客户端请求头也不满足时:

    //复杂请求,会发送两个请求,一个options一个put
function CorsAjax2(){
$.ajax({
url:'http://www.py_test2.com:8081/cors',
dataType:'text',
data:{},
type:"put",
headers:{'k1':'ddasf',"k2":'fa'},
success:function(data){
console.log(data);
}
})
}

服务端需要设置关于请求头的信息

    #复杂请求
def options(self, *args, **kwargs):#第一次用于预检
#先允许网站接入
#self.set_header('Access-Control-Allow-Origin',"*") # 或者加上*代表所有的都允许
#如果客户端允许传递cookie,那么这里请求头就不能是*,必须是指定的url
self.set_header('Access-Control-Allow-Origin', "http://www.py_test1.com:8080")
#若是请求方法不满足get,post,head
self.set_header('Access-Control-Allow-Methods',"PUT,DELETE")#还可以添加其他,比如DELETE,不能是*
#若是请求头也不满足简单请求,也需要设置
self.set_header('Access-Control-Allow-Headers', "k1,k2")#客户端自定义请求头

对于客户端预检可以设置缓存时间,在相应时间内,不会再进行预检

        #可以设置缓存时间,原来需要一次预检一次请求,现在只需要一次请求
self.set_header('Access-Control-Max-Age',)#10秒内不再产生预检

对于请求头,若是服务端想要自定义请求都传入客户端:需要进行以下操作

    def put(self, *args, **kwargs):#第二次为请求
#服务端自定义响应头
#self.set_header('xxoo','seven')
#self.set_header('bili','daobidao')#这样是客户端无法接收
#还需要设置一条
#self.set_header('Access-Control-Expose-Headers',"xxoo,bili")

3.当客户端允许携带cookie时

需要在客户端设置XMLHttpRequest的withCredentials为true

    //复杂请求,会发送两个请求,一个options一个put
function CorsAjax2(){
$.ajax({
url:'http://www.py_test2.com:8081/cors',
dataType:'text',
data:{},
type:"put",
headers:{'k1':'ddasf',"k2":'fa'},
xhrFields:{withCredentials:true},//默认是不允许携带cookie和ssl证书等,需要设置,服务端也要相应设置
success:function(data){
console.log(data);
}
})
}

注意在服务端响应时不允许设置Access-Control-Allow-Origin为通配符*

#若是客户端传递cookie进入,需要设置允许证书等
self.set_header('Access-Control-Allow-Credentials',"true")

完整代码

    #复杂请求
def options(self, *args, **kwargs):#第一次用于预检
#先允许网站接入
#self.set_header('Access-Control-Allow-Origin',"*") # 或者加上*代表所有的都允许
#如果客户端允许传递cookie,那么这里请求头就不能是*,必须是指定的url
self.set_header('Access-Control-Allow-Origin', "http://www.py_test1.com:8080")
#若是请求方法不满足get,post
self.set_header('Access-Control-Allow-Methods',"PUT,DELETE")#还可以添加其他,比如DELETE,不能是*
#若是请求头也不满足简单请求,也需要设置
self.set_header('Access-Control-Allow-Headers', "k1,k2")#客户端自定义请求头
#若是客户端传递cookie进入,需要设置允许证书等
self.set_header('Access-Control-Allow-Credentials',"true")
#可以设置缓存时间,原来需要一次预检一次请求,现在只需要一次请求
self.set_header('Access-Control-Max-Age',)#10秒内不再产生预检

在第二次请求中:可以设置cookie,并获取

    def put(self, *args, **kwargs):#第二次为请求
#由于设置了cookie,所有这里不允许*
#self.set_header('Access-Control-Allow-Origin', "*")
self.set_header('Access-Control-Allow-Origin',"http://www.py_test1.com:8080")
self.set_header('Access-Control-Allow-Credentials',"true")
#为跨域站点设置cookie
print(self.cookies)
self.set_cookie('kk','')
self.write('put ok')

注意第二次请求也是需要设置Access-Control-Allow-Origin的

而且由于cookie的添加需要设置Access-Control-Allow-Credentials

前端完整:

<script>
function CorsAjax(){
$.ajax({
url:'http://www.py_test2.com:8081/cors',
dataType:'text',
data:{},
type:"post",
success:function(data){
console.log(data);
}
})
} //复杂请求,会发送两个请求,一个options一个put
function CorsAjax2(){
$.ajax({
url:'http://www.py_test2.com:8081/cors',
dataType:'text',
data:{},
type:"put",
headers:{'k1':'ddasf',"k2":'fa'},
xhrFields:{withCredentials:true},//默认是不允许携带cookie和ssl证书等,需要设置,服务端也要相应设置
success:function(data){
console.log(data);
}
})
}

服务端完整:

class CorsHandler(tornado.web.RequestHandler):
def get(self, *args, **kwargs):
self.write('{"status":1,"message":"get"}') #简单请求
def post(self, *args, **kwargs):
self.set_header('Access-Control-Allow-Origin',"http://www.py_test1.com:8080,http://www.py_test1.com:8080")#或者加上*代表所有的都允许
self.write('{"status":1,"message":"post"}') #复杂请求
def options(self, *args, **kwargs):#第一次用于预检
#先允许网站接入
#self.set_header('Access-Control-Allow-Origin',"*") # 或者加上*代表所有的都允许
#如果客户端允许传递cookie,那么这里请求头就不能是*,必须是指定的url
self.set_header('Access-Control-Allow-Origin', "http://www.py_test1.com:8080")
#若是请求方法不满足get,post
self.set_header('Access-Control-Allow-Methods',"PUT,DELETE")#还可以添加其他,比如DELETE,不能是*
#若是请求头也不满足简单请求,也需要设置
self.set_header('Access-Control-Allow-Headers', "k1,k2")#客户端自定义请求头
#若是客户端传递cookie进入,需要设置允许证书等
self.set_header('Access-Control-Allow-Credentials',"true")
#可以设置缓存时间,原来需要一次预检一次请求,现在只需要一次请求
self.set_header('Access-Control-Max-Age',)#10秒内不再产生预检 def put(self, *args, **kwargs):#第二次为请求
#服务端自定义响应头
#self.set_header('xxoo','seven')
#self.set_header('bili','daobidao')#这样是客户端无法接收
#还需要设置一条
#self.set_header('Access-Control-Expose-Headers',"xxoo,bili") #由于设置了cookie,所有这里不允许*
#self.set_header('Access-Control-Allow-Origin', "*")
self.set_header('Access-Control-Allow-Origin',"http://www.py_test1.com:8080")
self.set_header('Access-Control-Allow-Credentials',"true")
#为跨域站点设置cookie
print(self.cookies)
self.set_cookie('kk','')
self.write('put ok')

更多信息来源可以看此处

简单请求 OR 非简单请求

1
2
3
4
5
6
7
8
9
10
11
12
13
条件:
    1、请求方式:HEAD、GET、POST
    2、请求头信息:
        Accept
        Accept-Language
        Content-Language
        Last-Event-ID
        Content-Type 对应的值是以下三个中的任意一个
                                application/x-www-form-urlencoded
                                multipart/form-data
                                text/plain
 
注意:同时满足以上两个条件时,则是简单请求,否则为复杂请求

ajax跨域原理和cors跨域资源共享的更多相关文章

  1. Jquery+ajax+json+servlet原理和Demo

    Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...

  2. 浅谈跨域问题,CORS跨域资源共享

    1,何为跨域? 在理解跨域问题之前,你先要了解同源策略和URL,简单叙述: 1)同源策略 三同:协议相同,域名相同,端口相同: 目的:保证用户信息安全,防止恶意网站窃取数据.同源策略是必须的,否则co ...

  3. (三)ajax请求不同源之cors跨域

    一.基本原理 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)它允许浏览器向跨源服务器,发出 XMLHttpReque ...

  4. jQuery.Ajax IE8,9 无效(CORS跨域)

    今天在开发网站的时候,发现一个问题,$.ajax()在 IE8,9 浏览器不起作用,但 Chrome,Firefox ,360,IE10以上等浏览器却是可以的,网上资料很多,查询最后发现是 IE8,9 ...

  5. JSONP跨域原理和jQuery.getJSON用法

    JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式).本文主要介绍JS ...

  6. ssm框架如果想要跨域请求,cors跨域

    <!-- 跨域 --> <mvc:cors> <mvc:mapping path="/**"/> </mvc:cors> 在spri ...

  7. ajax跨域请求解决方案 CORS和JSONP

    什么是跨域: 只要协议.域名.端口有任何一个不同,都会被当成不同的域.而由于浏览器的同源策略(同源策略:域名.协议.端口均相同),浏览器之间要隔离不同域的内容,禁止互相操作,不能执行其他网站的js.所 ...

  8. Springboot CORS跨域访问

    Springboot CORS跨域访问 什么是跨域 浏览器的同源策略限制: 它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础 ...

  9. 浅谈跨域以及WebService对跨域的支持

    跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问.也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源. 在 ...

随机推荐

  1. 软件工程项目之摄影App(第二次冲刺)

    第二次冲刺阶段做出了登录,还有首页.基本界面也成型了. 登录验证码是用了mob的验证码skd.

  2. JavaScript使用childNodes和children

    childNodes用来获取一个元素的所有子元素,这个包括元素节点和文本节点. children用来获取一个元素的子元素节点,注意只是元素节点 其中DOM中常见的三种节点分别如下: 元素节点:< ...

  3. 将J2EE的Web项目设置为支持Activiti

    <natures> <nature>org.eclipse.jem.workbench.JavaEMFNature</nature> <nature>o ...

  4. lamp下mysql安全加固

    lamp下mysql安全加固 1.修改root用户口令,删除空口令 缺省安装的MySQL的root用户是空密码的,为了安全起见,必须修改为强密码,所谓的强密码,至少8位,由字母.数字和符号组成的不规律 ...

  5. Log4j 日志操作包配置详解

    log4j简介 Log4j是Apache的一个开源项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件,甚至是套接口服务器.NT的事件记录器.UNIX Syslog守护 ...

  6. Spring MVC @ModelAttribute注解

    在一个Controller内,被@ModelAttribute标注的方法会在此controller的每个handler方法执行前被执行. 被@ModelAttribute标注的方法的参数绑定规则和普通 ...

  7. string.PadLeft & string.PadRight

    比如我想让他的长度是20个字符有很多字符串如string a = "123",只有3个字符怎么让他们在打印或显示在textBox上的时候不够的长度用空格补齐呢? string.Pa ...

  8. poj3061(尺取法)

    ---恢复内容开始--- 题目意思:给你一段非负序列,再给你一个值k,找出这段序列中最少的连续子序列使得和为k: 解题思路:因为都是正数,我们只需要找到一段区间不大于k,就停止,然后左边趋近看是否能得 ...

  9. scrapy 简单爬虫实验

    利用python的模块requests来爬取百度搜索出来的url 使用环境为python3 #!/use/bin/env python # -*- coding:utf-8 -*- import re ...

  10. python基础成长之路四-基础数据类型方法

    1,程序开发三大流程: 顺序--从上向下,顺序执行代码 分支--根据条件判断,决定执行代码的分支 循环--让特定的代码重复执行 2,whlie循环语句: Break 某一条件满足时,退出循环,不在执行 ...