Python Tornado之跨域请求与Options请求方式
问题背景
公司的项目是前后端分离，前端Vue+后端JavaSpringBoot为主，部分功能是PythonTornado，那么需要支持一个是跨域以及Options请求。
Option请求
只需要跟处理get一样处理options请求就可以了。vue一般需要访问options方法， 如果报错则很难继续，所以只要通过就行了，当然需要其他逻辑就自己控制。
#COM串口
class SerialHandler(BaseHandler):
#处理GET请求
def get(self):
self.write('血压监测结果为：')
#省略其他逻辑
#处理OPTIONS请求
def options(self):
#返回方法1
#self.set_status(204)
#self.finish()
#返回方法2
self.write('{"errorCode":"00","errorMessage","success"}')
跨域请求
既然是前后端分离，那就肯定会遇到cros跨域请求难题，可以设置一个BaseRequest，然后继承即可。
class BaseHandler(tornado.web.RequestHandler):
#blog.csdn.net/moshowgame 解决跨域问题
def set_default_headers(self):
self.set_header('Access-Control-Allow-Origin', '*')
self.set_header('Access-Control-Allow-Headers', '*')
self.set_header('Access-Control-Max-Age', 1000)
#self.set_header('Content-type', 'application/json')
self.set_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')
self.set_header('Access-Control-Allow-Headers',#'*')
'authorization, Authorization, Content-Type, Access-Control-Allow-Origin, Access-Control-Allow-Headers, X-Requested-By, Access-Control-Allow-Methods')
补充知识：Python之flask框架配置接口，处理跨域
Flask框架介绍
Flask是当下流行的Web框架，它是用Python实现的。
Flask显著的特点是：它是一个“微”框架。”微”意味着Flask旨在保持核心的简单，但同时又易于扩展。默认情况下，Flask 不包含数据库抽象层、表单验证，或是其它任何已有多种库可以胜任的功能。然而，Flask 支持用扩展来给应用添加这些功能。众多的扩展提供了数据库集成、表单验证、上传处理、各种各样的开放认证技术等功能。Flask的这些特性，使得它在Web开发方面变得非常流行。
Flask安装
通过python的pip包管理工具进行安装，python3之后下载python也会自动带出pip。
验证pip是否安装：打开命令行直接输入pip，如果出现下面的显示则表示已安装
安装flask：
pip install flask
Flask使用
import flask,json #引入flask框架
server = flask.Flask(__name__) #实例化server，把当前这个python文件当做一个服务，__name__代表当前这个python文件
@server.route('/index',methods=['get']) #'index'是接口路径，methods不写，则默认get请求
#装饰器下面的函数为一个接口
def index():
res = {'msg':'接口返回信息','code':'0000'}
return json.dumps(res,ensure_ascii=False)
#json.dumps序列化时对中文默认使用ascii编码，想输出真正的中文需要指定ensure_ascii=False
#启动服务
server.run(port=8080,debug=True,host='0.0.0.0')
#debug=True改了代码后，不用重启，它会自动重启
#'host'='0.0.0.0'别人可以通过IP访问
结果：
前端请求数据
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>python接口测试</title>
<script src="http://static.wanlianjin.com/data/m/wlcs/js/nocar/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button onclick="getMessage()">点击获取数据</button>
<script>
function getMessage(){
$.ajax({
url:'http://100.39.8.55:8080/index',
type:'GET',
dataType:'json',
succrss:(data)=>{
console.log(data)
}
})
}
</script>
</body>
</html>
结果：
因协议、域名、端口的不同，接口请求的数据需要进行跨域
解决方法如下：
1.JSONP
将dataType改为jsonp，仅用于GET方法
注意：
请求到数据是一个纯Json格式的话，是不能用Jsonp方式调用的，支持Jsonp方式的url返回的一定是js脚本，一般是一句函数调用，请注意报的错是callback=，=号后面的就是你得到的。callback是客户端页面定义的函数名，JSONP方式会在返回的Javascript代码里面调用这个函数，JSON数据是当做参数传入方法的而不是直接返回一个json。这个地址不支持jsonp,请求来的数据是json,浏览器要把当做Javascript来解析，遇到 “:” 就报错了。如果这个地址支持JSONP,应该返回Javascript代码，在代码里面调用callback函数才对。
修改客户端和服务端代码：
客户端：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>python接口测试</title>
<script src="http://static.wanlianjin.com/data/m/wlcs/js/nocar/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button onclick="getMessage()">点击获取数据</button>
<script>
function jsonpCallback(data) {
console.log("jsonpCallback: " + JSON.parse(data).name)
}
function getMessage(){
$.ajax({
url:'http://100.39.8.55:8080/index?callback=?',
type:'GET',
dataType:'jsonp',
crossDomain:true,
contentType: "application/jsonp;",
// jsonp 字段含义为服务器通过什么字段获取回调函数的名称
jsonp: 'callback',
// 声明本地回调函数的名称，jquery 默认随机生成一个函数名称
jsonpCallback: 'jsonpCallback',
success: function(data) {
console.log("ajax success callback: " + JSON.parse(data).name)
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus + ' ' + errorThrown);
}
})
}
</script>
</body>
</html>
服务端：
import flask,json #引入flask框架
server = flask.Flask(__name__) #实例化server，把当前这个python文件当做一个服务，__name__代表当前这个python文件
@server.route('/index',methods=['get']) #'index'是接口路径，methods不写，则默认get请求
#装饰器下面的函数为一个接口
def index():
data = '{"name":"xiaoming","age":"15"}'
callback = 'jsonpCallback'
jsonp = callback + '(' + json.dumps(data) + ')'
return jsonp #返回的是代码字样
#启动服务
server.run(port=8080,debug=True,host='0.0.0.0')
#debug=True改了代码后，不用重启，它会自动重启
#'host'='0.0.0.0'别人可以通过IP访问
结果：
2.Flask-CORS
安装：pip install flask-cors
服务端代码：
import flask,json #引入flask框架
from flask_cors import CORS
server = flask.Flask(__name__) #实例化server，把当前这个python文件当做一个服务，__name__代表当前这个python文件
# r'/*' 是通配符，让本服务器所有的URL 都允许跨域请求
CORS(server, resources=r'/*')
@server.route('/index',methods=['get']) #'index'是接口路径，methods不写，则默认get请求
#装饰器下面的函数为一个接口
def index():
data = {"name":"xiaoming","age":"15"}
return json.dumps(data,ensure_ascii=False)
#启动服务
server.run(port=8080,debug=True,host='0.0.0.0')
#debug=True改了代码后，不用重启，它会自动重启
#'host'='0.0.0.0'别人可以通过IP访问
以上这篇Python Tornado之跨域请求与Options请求方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
关于python的bottle框架跨域请求报错问题的处理方法
在用python的bottle框架开发时,前端使用ajax跨域访问时,js代码老是进入不了success,而是进入了error,而返回的状态却是200.url直接在浏览器访问也是正常的,浏览器按F12后会发现下面这个错误提示 XMLHttpRequest cannot load http://192.168.0.118:8081/get_mobile_number/?id=1. No 'Access-Control-Allow-Origin' header is present on the r
-
python web.py开发httpserver解决跨域问题实例解析
使用web.py做http server开发时,遇到postman能够正常请求到数据,但是浏览器无法请求到数据,查原因之后发现是跨域请求的问题. 跨域请求,就是在浏览器窗口中,和某个服务端通过某个 "协议+域名+端口号" 建立了会话的前提下,去使用与这三个属性任意一个不同的源提交了请求,那么浏览器就认为你是跨域了,违反了浏览器的同源策略. w3c标准中,有针对跨域请求的规范,在响应头中有以下三种跨域访问限制: Access-Control-Allow-Origin:限制允许跨域访问的源
-
json跨域调用python的方法详解
本文实例讲述了json跨域调用python的方法.分享给大家供大家参考,具体如下: 客户端: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
-
关于python 跨域处理方式详解
因为浏览器的同源策略限制,不是同源的脚本不能操作其他源下面的资源,想操作另一个源下面的资源就属于跨域了,这里说的跨域是广义跨域,我们常说的代码中请求跨域,是狭义的跨域,即在脚本代码中向非同源域发送http请求 浏览器的同源策略(SOP/same origin policy)是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS(跨站脚本攻击 cross site scripting)和CSRF(跨站请求伪造cross-site request forgery)等攻击. (同
-
Python的Django应用程序解决AJAX跨域访问问题的方法
引子 使用Django在服务器端写了一个API,返回一个JSON数据.使用Ajax调用该API: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width
-
Python Tornado之跨域请求与Options请求方式
问题背景 公司的项目是前后端分离,前端Vue+后端JavaSpringBoot为主,部分功能是PythonTornado,那么需要支持一个是跨域以及Options请求. Option请求 只需要跟处理get一样处理options请求就可以了.vue一般需要访问options方法, 如果报错则很难继续,所以只要通过就行了,当然需要其他逻辑就自己控制. #COM串口 class SerialHandler(BaseHandler): #处理GET请求 def get(self): self.writ
-
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
我们在vue开发中用axios进行跨域请求时有时会遇到,同一个接口请求了两次,并且第一次都是options请求,然后才是post/get请求 如下图 options请求 get请求 为什么会出现这种原因呢? 这是因为CORS跨域分为 简单跨域请求和复杂跨域请求: 简单跨域不会发送options请求,复杂跨域会发送一个预检请求options. 1.简单跨域满足的条件 1.请求方式是以下三种之一: HEAD GET POST 2.HTTP的头信息不超出以下几种字段 Accept Accept-Lan
-
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法 在ssm框架整合中,使用layui作为前端页面,拖拽图片上传,填写接口后,后台能够成功接收到数据,但由于页面资源和后台访问地址的不一致(即使域名一致但端口不一致)引起跨域问题,导致接收资源后在前端无法接收到后台返回的数据. 前台页面: <html> <head> <meta charset="UTF-8"> <title>校园网络打印</title> <li
-
angular.js中解决跨域问题的三种方式
前言 开始本文之前,大家应该首先了解,协议.主机名和端口号相同叫同源.同源策略允许页面从同一个站点加载和执行特定的脚本.站外其他来源的脚本同页面的交互则被严格限制. 要解决这个问题就需要跨域,本文介绍解决angular中的跨域的三种方式: 一.JSONP JSONP的原理是通过 <script> 标签发起一个GET请求来取代XHR请求.JSONP生成一个<script> 标签并插到DOM中,然后浏览器会接管并向 src 属性所指向的地址发送请求.当服务器返回请求时, 响应结果会被包
-
前端跨域的几种解决方式总结（推荐）
搞大前端的,肯定都会遇到跨域问题的,虽然网上这方面的资料也很多,但我还是喜欢自己写一遍,自己理解过.总结过的东西才记得最深刻. 同源策略 JavaScript 的同源策略,是由Netscape提出的一个著名的安全策略,为了阻止A站的JS去操作别的网站的数据.你想啊,你现在打开了浏览器,在一个tab窗口中打开了银行网站,在另外一个tab窗口中打开了一个恶意网站,而那个恶意网站挂了一个的专门修改银行信息的JavaScript,当你访问这个恶意网站并且执行它JavaScript时,你的银行页面就会被这
-
基于CORS实现WebApi Ajax 跨域请求解决方法
概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各种APP万花齐放的今天,API的跨域请求是不能避免的. 在默认情况下,为了防止CSRF跨站的伪造攻击(或者是 javascript的同源策略(Same-Origin Policy)),一个网页从另外一个域获取数据时就会收到限制.有一些方法可以突破这个限制,那就是大家熟知的JSONP, 当然这只是众多
-
jQuery.ajax 跨域请求webapi设置headers的解决方案
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 1.第一步 服务端设置响应头,在webapi的web.config做如下设置 <system.webServer> <httpProtocol> <!--跨域配置开始--> <customHeaders> <add name="Access-Control-All
-
Django实现跨域请求过程详解
前言 CORS 即 Cross Origin Resource Sharing 跨域资源共享. 跨域请求分两种:简单请求.复杂请求. 简单请求 简单请求必须满足下述条件. HTTP方法为这三种方法之一:HEAD.GET.POST HTTP头消息不超出以下字段: Accept.Accept-Language.Content-Language.Last-Event-ID 且Content-Type只能为下列类型中的某一个: application/x-www-from-urlencoded mult
-
Flask实现跨域请求的处理方法
在Flask开发RESTful后端时,前端请求会遇到跨域的问题.下面是解决方法: 使用 flask-cors库可以很容易的解决 pip install flask-cors 两种方法,一个是全局/批量的,一个是单一独立的: 安全起见,一般来说使用独立的方式会常用一些. 1.独立方式 通过给路由添加@cross_origin标识即可 from flask import Flask, jsonify from flask_cors import cross_origin @app.route('/u