【React + flask】跨域服务及访问
Flask
from flask import Flask , request
from flask_cors import *
import flask
import json
import pickle
app = Flask(__name__)
CORS(app, resources=r'/*') headers = {
'Cache-Control' : 'no-cache, no-store, must-revalidate',
'Pragma' : 'no-cache' ,
'Expires': '' ,
'Access-Control-Allow-Origin' : 'http://localhost:3000',
'Access-Control-Allow-Origin' : '*',
'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token'
} @app.route('/api/timers', methods=["GET"])
def get_timers(*args):
with open('./data.json','r+') as f:
timers_json = json.load(f)
rsp = flask.Response(json.dumps(timers_json))
rsp.headers = headers
rsp.headers['Cache-Control'] = 'no-cache'
return rsp
React
window.client = (function () {
function getTimers(success) {
return fetch('http://localhost:3001/api/timers', {
headers: {
'Accept': 'application/json',
},
}).then(checkStatus)
.then(parseJSON)
.then(success);
} function createTimer(data) {
return fetch('http://localhost:3001/api/timers', {
method: 'post',
body: JSON.stringify(data),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
}).then(checkStatus);
} function updateTimer(data) {
return fetch('http://localhost:3001/api/timers', {
method: 'put',
body: JSON.stringify(data),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
}).then(checkStatus);
} function deleteTimer(data) {
return fetch('http://localhost:3001/api/timers', {
method: 'delete',
body: JSON.stringify(data),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
}).then(checkStatus);
} function startTimer(data) {
console.log("startTimer")
return fetch('http://localhost:3001/api/timers/start', {
method: 'post',
mode:'cors',
body: JSON.stringify(data),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
//'Content-Type':'application/x-www-form-urlencoded'
},
}).then(checkStatus);
} function stopTimer(data) {
return fetch('http://localhost:3001/api/timers/stop', {
method: 'post',
body: JSON.stringify(data),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
}).then(checkStatus);
} function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
} else {
const error = new Error(`HTTP Error ${response.statusText}`);
error.status = response.statusText;
error.response = response;
console.log(error);
throw error;
}
} function parseJSON(response) {
return response.json();
} return {
getTimers,
createTimer,
updateTimer,
startTimer,
stopTimer,
deleteTimer,
};
}());
【React + flask】跨域服务及访问的更多相关文章
- react axios 跨域访问一个或多个域名
1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: "proxy":"http://iot-demo ...
- 直接用postman测试api ,服务器端没提供跨域也可以访问。
1. 直接用postman测试api ,服务器端没提供跨域也可以访问. 但是,如果用本地的 sever 搭的server, 然后去访问api的话,浏览器会提示 跨域错误.
- flask跨域请求三行代码搞定
flask跨域请求三行代码就可以搞定.但是请注意几点: 第一:只能返回json格式数据,比如list.ndarray等都不可以 第二:返回的对象必须是是字符串.元组.响应实例或WSGI可调用. pyt ...
- angularjs flask跨域问题 XMLHttpRequest cannot load. No 'Access-Control-Allow-Origin'
场景,我要来我的server(A)上用api来访问另一个server(B)的问题,如果直接在A上调用B的api,那么就会出现XMLHttpRequest cannot load. No 'Access ...
- flask 跨域请求
Flask中,跨域请求主要有两种方式: 1.在响应头信息中添加允许跨域 如下,使用装饰器app.after_request(我这里的web是定义的蓝图),这样在每次请求后,加入header 2.使用第 ...
- Webpack4 学习笔记七 跨域服务代理
webpack 小插件使用 webpack 监听文件变化配置 webpack 处理跨域问题 Webpack 小插件使用 clean-webpack-plugin: 用于在生成之前删除生成文件夹的Web ...
- tornado django flask 跨域解决办法(cors)
XMLHttpRequest cannot load http://www.baidu.com. No 'Access-Control-Allow-Origin' header is present ...
- WCF 自托管、无配置文件实现jsonp(跨域)的访问
以下内容基于WCF4.0,本文将对比讨论配置文件方案和无配置文件方案的实现方式. WCF4.0加入了对RESTFU和标准终结点的支持,这为实现跨域提供了简单的方式. 一.有配置文件的情况: 首先我们先 ...
- Chrome 浏览器跨域和安全访问问题 使用 chrome的命令行标记:disable-web-security 参数联调线上数据
做前端的,用Ajax获取数据,是常有的事情,同域下自然没问题了,如果是不同域获取数据,浏览器就有个同源策略的限制. 如图: Origin * is not allowed by Access-Cont ...
随机推荐
- PhotoshopCC 2017安装破解 + cuterman
之前安装了PhotoshopCC 2017版本的软件,但是绿色版的(安装简介.使用方便).但是在随着Adobe公司对设计的不断追求和工具的不断更新,更加强大.更加优秀的设计插件和工具不断出新,最近朋友 ...
- BZOJ4081 : [Wf2014]Skiing
首先将目标点按$y$坐标从小到大排序. 如果加速度为$0$,那么只要贪心走一遍即可. 否则考虑DP,设$f[i][j]$表示从$i$点以速度$j$出发最多能经过多少个点. 注意到将DP值相同的合并可以 ...
- X-factor Chains [POJ3421] [素数]
Description 给定一个正整数X, 一个长度为m的X-因子链是由m+1个整数组成的.其中 1 = X0, X1, X2, …, Xm = X 满足Xi < Xi+1 且 Xi ...
- 将一个C++的AES加密算法(有向量的)翻译成C#
/****************************************************************************** Copyright (c) 2012-2 ...
- linux shell中break和continue跳出循环
到目前为止,我们已经看到了,创建循环和使用循环来完成不同的任务.有时候,你需要停止循环或跳过循环迭代. 在本教程中,您将了解以下两个语句用于控制 Shell 循环: break 语句 continue ...
- python测试开发django-53.xadmin里Model分类管理(proxy=True)
前言 django的xadmin后台使用xadmin.site.register注册时,一张表只能注册一次,在后面页面上只能显示出一个页面. 有时候我们想从里面筛选出自己想要的数据,比如有全部的学生成 ...
- 搭建memcached使用:/usr/bin/phpize 安装memcached扩展的时候报错
Can't find PHP headers in /usr/include/phpThe php-devel package is required for use of this command ...
- ethtool 解决网卡丢包严重和网卡原理
1 概述 最近业务上老有问题,查看发现overruns值不断增加,学习了一下相关的知识.发现数值也在不停的增加.发现这些 errors, dropped, overruns 表示的含义还不大一样. ...
- zookeeper三节点集群安装记录
以下是3个节点的zk安装记录. 下载 下载地址: http://mirrors.shu.edu.cn/apache/zookeeper/ cd /data/opt/zk wget http://mir ...
- NOIP2010提高组 机器翻译
OJ提交地址:https://www.luogu.org/problemnew/show/P1540 http://noi.openjudge.cn/ch0112/07/ 总时间限制: 1000ms ...