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网站返回的数据时检测到与当前网站的域名不同,出于安 ...
随机推荐
- python全栈开发 * 09知识点汇总 * 1806011
09 函数初识一 函数的的定义# 函数: 对代码块和功能的封装和定义# 引入 回家过程 未用函数# print("步行")# print("坐地铁")# pri ...
- RGBA与Opacity
rgba(r,g,b,a) 都与透明度有关,rgba不会影响文字,opacity则会.
- from appium import webdriver 使用python爬虫,批量爬取抖音app视频(requests+Fiddler+appium)
使用python爬虫,批量爬取抖音app视频(requests+Fiddler+appium) - 北平吴彦祖 - 博客园 https://www.cnblogs.com/stevenshushu/p ...
- odoo二次开发 tips
1.model属性 每个对象(即class)一般由字段(变量)和函数组成,每个对象对应着数据库中的一张表,驼峰命名方式 models.Model 基础模块,会根据字段和模型名在后台数据库生成对应得表文 ...
- Qt自定义界面
https://blog.csdn.net/zhangxiaoyu_sy/article/details/78925221
- Intro to Mongoid
Mongoid: object-document-mapper(ODM) Mongoid Configuration: rails g mongoid:config Document: Documen ...
- 集合 & 深浅copy
集合: 特点:集合是可变的数据类型,但他里面的元素必须是不可变的数据类型,无序,不可重复. 创建: set1 = set({1,2,3}) 或者直接创建set2 = {1,2,3} 集合的增删查: 增 ...
- java框架之SpringBoot(10)-启动流程及自定义starter
启动流程 直接从 SpringBoot 程序入口的 run 方法看起: public static ConfigurableApplicationContext run(Object source, ...
- [js]面向对象2
delete删除属性 删除对象的属性 删除未用var定义的变量. delete返回布尔 删除不存在的属性,返回true 无法删除原形中的属性 如 delete obj.toString() resu= ...
- 【JVM】-NO.110.JVM.1 -【hsdis jitwatch 生成查看汇编代码】
Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...