CORS跨域请求
一、问题:
服务器端代码
from flask import Flask
from flask import make_response
from flask import jsonify app = Flask(__name__) def cors_response(res):
response = make_response(jsonify(res))
response.headers['Access-Control-Allow-Origin'] = '*'
response.headers['Access-Control-Allow-Headers'] = 'content-type'
return response @app.route("/api/order", methods=['GET', 'POST', 'OPTIONS'])
def index():
print('request success')
return cors_response({'code': 0, 'data': 'success'}) if __name__ == '__main__':
app.run()
axios请求代码
axios.post('http://127.0.0.1:5000/api/order',
{headers: {'Content-type': 'application/json', 'Access-Control-Allow-Origin': '*'}}
)
运行结果
服务器端控制台结果
浏览器console控制台
二、CORS跨域原理
1.CORS简介
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
2.两种请求
浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。
只要同时满足以下两大条件,就属于简单请求。
(1) 请求方法是以下三种方法之一:
- HEAD
- GET
- POST
(2)HTTP的头信息不超出以下几种字段:
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type:只限于三个值
application/x-www-form-urlencoded
、multipart/form-data
、text/plain
凡是不同时满足上面两个条件,就属于非简单请求。
浏览器对这两种请求的处理,是不一样的。
三、错误分析及解决
上述请求为非简单请求,请求过程
- 正式通信前,会有一次HTTP查询请求,称为‘预检’请求(preflight)。预检请求用的方法是OPTIONS,与控制台的结果符合
- 服务器接收预检请求后,通过检查origin,
Access-Control-Request-Method
和Access-Control-Request-Headers
字段以后,确认允许跨源请求,就可以做出回应。- 检查origin:response headers中的Access-Control-Allow-Origin的值是否包含发送请求的域名。
Access-Control-Allow-Origin: * 表示同意任意跨域请求
- 检查Access-Control-Request-Method:它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法,由于此次请求的方法是POST,服务器默认支持,因此不需要设置
- 如果浏览器请求包括
Access-Control-Request-Headers
字段,则Access-Control-Allow-Headers
字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段,不限于浏览器在"预检"中请求的字段。由于以上例子的浏览器请求添加了自定义的Access-Control-Allow-Origin字段,所以需要将服务器端的response.headers['Access-Control-Allow-Headers'] = 'content-type' 改为
response.headers['Access-Control-Allow-Headers'] = 'content-type, Access-Control-AllowOrigin'
- 检查origin:response headers中的Access-Control-Allow-Origin的值是否包含发送请求的域名。
参考:
CORS跨域请求的更多相关文章
- Spring Boot Web应用开发 CORS 跨域请求支持:
Spring Boot Web应用开发 CORS 跨域请求支持: 一.Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等CORS与JSONP相比 1. JSONP只能实现 ...
- 4 伪ajax:jsonp、cors 跨域请求
一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...
- CORS跨域请求总结
CORS跨域请求分为简单请求和复杂请求. 1. 简单请求: 满足一下两个条件的请求. (1) 请求方法是以下三种方法之一: HEAD GET POST (2)HTTP的头信息不超出以下几种字段: Ac ...
- CORS跨域请求规则以及在Spring中的实现
CORS: 通常情况下浏览器禁止AJAX从外部获取资源,因此就衍生了CORS这一标准体系,来实现跨域请求. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origi ...
- Java实现CORS跨域请求
问题 使用前后端分离模式开发项目时,往往会遇到这样一个问题 -- 无法跨域获取服务端数据 这是由于浏览器的同源策略导致的,目的是为了安全.在前后端分离开发模式备受青睐的今天,前端和后台项目往往会在不同 ...
- CORS——跨域请求那些事儿
在日常的项目开发时会不可避免的需要进行跨域操作,而在实际进行跨域请求时,经常会遇到类似 No 'Access-Control-Allow-Origin' header is present on th ...
- CORS跨域请求[简单请求与复杂请求]
CORS即Cross Origin Resource Sharing(跨来源资源共享),通俗说就是我们所熟知的跨域请求.众所周知,在以前,跨域可以采用代理.JSONP等方式,而在Modern浏览器面前 ...
- CORS 跨域请求
一.简介 CORS需要浏览器和服务器同时支持.目前,所有浏览器都支持该功能,IE浏览器不能低于IE10. 整个CORS通信过程,都是浏览器自动完成,不需要用户参与.对于开发者来说,CORS通信与同源的 ...
- CORS跨域请求C#版
1.什么是跨域请求: 当从A网站使用AJAX请求B网站时,就会出现跨域请求. 此时B网站能够接收到A网站发来的请求并返回相应的结果,但是浏览器拿到B网站返回的数据时检测到与当前网站的域名不同,出于安 ...
随机推荐
- 动态HTMl处理
后续爬虫代码的建议 尽量减少请求次数 1. 能抓列表页就不抓详情页 2. 保存获取的html页面,供差错和重复请求使用 关注网站的所有类型的页面 1. wap页面,触屏版页面 2. H5页面 3. A ...
- java对excel文件内容读写修改操作
Read.java package domain; import java.io.FileInputStream; import java.io.InputStream; import jxl.Cel ...
- Android启动页欢迎界面大全 (网址)
地址:http://download.csdn.net/detail/u013424496/9539810
- TX2-入门坑点-Ubuntu16.04任务栏消失
问题:安装cuda过程中出现任务栏消失,快捷键失效的现象. 解决方法:重装桌面无法解决,使用cssm无法解决,最后删除home目录下的 .cache文件夹重启后解决
- CNPM 安装 for angularjs
npm config set proxy=http://127.0.0.1:8087npm config delete proxynpm config set registry=http://regi ...
- 编写Shell脚本的最佳实践
编写Shell脚本的最佳实践 http://kb.cnblogs.com/page/574767/ 需要记住的 代码有注释 #!/bin/bash # Written by steven # Name ...
- .net 程序加密
.net 程序加密,一般是对生成的exe文件或者dll直接进行加壳,配合加密锁或者许可进行授权控制,既能保证安全性,又控制软件的使用. 加壳工具的选择 一般要考虑几点,第一是加壳的安全性,不能被轻易脱 ...
- 【Linux】-NO.86.Linux.6.C.1.001-【CentOS 7 Install GCC】-
1.0.0 Summary Tittle:[Linux]-NO.86.Linux.6.C.1.001-[CentOS 7 Install GCC]- Style:Java Series:Log4j S ...
- larave----------通过composer.json下载laravel包----barryvdh/laravel-debugbar
1.去Packagist网站https://packagist.org/packages/barryvdh/laravel-debugbar#dev-master找到
- DIV层的使用方法
1.可以判断你选择的样式是否存在用下边的方法(如果存在的话执行某个方法) if ($(this).hasClass('cur')) 2.这个方法可以查询一个页面中同样的div层总共有几个 var i= ...