【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 ...
随机推荐
- HDU5518 : John's Fences
求出平面图的对偶图,那么需要选择一些环,使得这些环可以异或出所有环. 对于两个不同的区域,需要用一个代价最小的环把它们区分开,这对应最小割. 那么求出对偶图的最小割树,所有树边之和就是把所有区域都区分 ...
- BZOJ4966 : 总统选举
线段树维护每个点的最有可能是答案的数以及它的权重. 合并两个节点的时候,将权重互相抵消,保留较大的那一个. 得到答案后,再在对应权值的Treap中查询出现次数,检查是否真正是答案. 时间复杂度$O(n ...
- BZOJ2240 : ural1676 Mortal Combat
首先如果最大匹配不足$n$个那么显然每条边都不可能在匹配为$n$的方案中. 对于一条边$(u,v)$,如果它可能在最大匹配中,有两种情况: $1.(u,v)$是当前方案的匹配边. $2.$可以沿着$( ...
- tarjan求双联通分量(割点,割边)
之前一直对tarjan算法的这几种不同应用比较混淆...我太弱啦! 被BLO暴虐滚过来 用tarjan求点双,很多神犇都给出了比较详细的解释和证明,在这里就不讲了(其实是这只蒟蒻根本不会orz) 这里 ...
- 编程菜鸟的日记-初学尝试编程-C++ Primer Plus 第4章编程练习2
#include <iostream>#include <string>int main(){ using namespace std; string name; string ...
- 编程菜鸟的日记-初学尝试编程-寻找等长数组A与B(所含元素相同,顺序不同)相匹配的元素即a[i]=b[j]
#include <iostream> using namespace std; void matching(int a[],int b[],int N) { int i=0; while ...
- 初学JDBC的一些总结(二)
一.简单介绍PreparedStatement 和Statement的区别: PreparedStatement是用来执行SQL查询语句的API之一,Java提供了 Statement.Prepare ...
- hdu6024 Building Shops(区间dp)
https://cn.vjudge.net/problem/HDU-6024 分开考虑某一点种与不种,最后取二者的最小值. dp[i][1] = min(dp[i-1][0], dp[i-1][1]) ...
- ibatis中使用缓存
简单在ibatis中使用cache 首先设置SqlMapConfig.xml中<settings/>节点的属性cacheModelsEnabled="true" ...
- 集合总结--ArrayList、LinkedList、HashMap
一.概述 ArrayList:数组集合. 查询.修改.新增(尾部新增)快,删除.新增(队列中间)慢,适用于查询.修改较多的场景. LinkedList:双向链表集合.查 ...