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网站返回的数据时检测到与当前网站的域名不同,出于安 ...
随机推荐
- json转换学习
文章部分代码实体类可以忽略. 原文:https://www.cnblogs.com/free-dom/p/5801866.html 代码如下: package covert; import java. ...
- Python学习之旅(十)
Python基础知识(9):函数(Ⅰ) Python中函数的定义:是逻辑结构和过程化的一种编程方法 定义方法: def test(x): #def:定义函数的关键字 test:函数名 x:形参,也可以 ...
- BOM设计的一些问题及解决方案探讨----合版BOM
BOM是ERP的核心资料,也是比较难的一块,不仅涉及的内容多,要求准确性高,时效性也要求高.但传统的ERP在处理BOM时有不少问题,因此也有些软件公司引入了各种BOM类型,像"标准BOM&q ...
- HTML调用PC摄像头【申明:来源于网络】
HTML调用PC摄像头[申明:来源于网络] ---- 地址:http://www.oschina.net/code/snippet_2440934_55195 <!DOCTYPE html> ...
- Oracle工具——ADRCI
ADRCI工具是Oracle11g才推出的新工具,主要用来管理alert文件.trace文件.dump文件.健康监事报告等. 这一篇简单介绍ADRCI工具. 用过11g的人都会发现,11g中alert ...
- 单片机小白应该如何学习stm32的一些实践心得!
嵌入式搬砖道路上的大三狗一枚,撑死算个初学者吧.才学有限,下面仅仅是本人对STM32学习的一点心得与建议,希望对题主有帮助吧. 心得:本人当初学习STM32的时候有一些跟风的因素,自以为学的芯片越多就 ...
- 最全的MonkeyRunner自动化测试从入门到精通(6)
eclipse中进行插入PyDev插件的使用步骤一:monkeyrunner环境变量的配置.在Android Sdk中的tools目录下,拷贝路径,进行配置环境变量.与上面的配置方法一样,在这里不做过 ...
- JMeter学习-041-响应数据中文乱码解决方法
华夏子孙,中文为母语.因而在接口测试过程中,响应数据含有中文是再也正常不过的事情.同时,初学JMeter的童鞋,经常会遇到响应数据中中文乱码的问题. 本文中提供两种方式的修正方法,仅供大家参考,谢谢. ...
- EasyUI实现分页、搜索、行按钮功能
1.html+js代码: <html> <head> <meta name="viewport" content="width=device ...
- Django组件——分页器和中间件
分页器 Django内置分页器(paginator) 分页器函数为paginator,里面有几个重要的参数需要我们了解 paginator = Paginator(book_list, 10) #第二 ...