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】跨域服务及访问的更多相关文章

  1. react axios 跨域访问一个或多个域名

    1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: "proxy":"http://iot-demo ...

  2. 直接用postman测试api ,服务器端没提供跨域也可以访问。

    1. 直接用postman测试api ,服务器端没提供跨域也可以访问. 但是,如果用本地的 sever 搭的server, 然后去访问api的话,浏览器会提示 跨域错误.

  3. flask跨域请求三行代码搞定

    flask跨域请求三行代码就可以搞定.但是请注意几点: 第一:只能返回json格式数据,比如list.ndarray等都不可以 第二:返回的对象必须是是字符串.元组.响应实例或WSGI可调用. pyt ...

  4. angularjs flask跨域问题 XMLHttpRequest cannot load. No 'Access-Control-Allow-Origin'

    场景,我要来我的server(A)上用api来访问另一个server(B)的问题,如果直接在A上调用B的api,那么就会出现XMLHttpRequest cannot load. No 'Access ...

  5. flask 跨域请求

    Flask中,跨域请求主要有两种方式: 1.在响应头信息中添加允许跨域 如下,使用装饰器app.after_request(我这里的web是定义的蓝图),这样在每次请求后,加入header 2.使用第 ...

  6. Webpack4 学习笔记七 跨域服务代理

    webpack 小插件使用 webpack 监听文件变化配置 webpack 处理跨域问题 Webpack 小插件使用 clean-webpack-plugin: 用于在生成之前删除生成文件夹的Web ...

  7. tornado django flask 跨域解决办法(cors)

    XMLHttpRequest cannot load http://www.baidu.com. No 'Access-Control-Allow-Origin' header is present ...

  8. WCF 自托管、无配置文件实现jsonp(跨域)的访问

    以下内容基于WCF4.0,本文将对比讨论配置文件方案和无配置文件方案的实现方式. WCF4.0加入了对RESTFU和标准终结点的支持,这为实现跨域提供了简单的方式. 一.有配置文件的情况: 首先我们先 ...

  9. Chrome 浏览器跨域和安全访问问题 使用 chrome的命令行标记:disable-web-security 参数联调线上数据

    做前端的,用Ajax获取数据,是常有的事情,同域下自然没问题了,如果是不同域获取数据,浏览器就有个同源策略的限制. 如图: Origin * is not allowed by Access-Cont ...

随机推荐

  1. HDU5518 : John's Fences

    求出平面图的对偶图,那么需要选择一些环,使得这些环可以异或出所有环. 对于两个不同的区域,需要用一个代价最小的环把它们区分开,这对应最小割. 那么求出对偶图的最小割树,所有树边之和就是把所有区域都区分 ...

  2. BZOJ4966 : 总统选举

    线段树维护每个点的最有可能是答案的数以及它的权重. 合并两个节点的时候,将权重互相抵消,保留较大的那一个. 得到答案后,再在对应权值的Treap中查询出现次数,检查是否真正是答案. 时间复杂度$O(n ...

  3. BZOJ2240 : ural1676 Mortal Combat

    首先如果最大匹配不足$n$个那么显然每条边都不可能在匹配为$n$的方案中. 对于一条边$(u,v)$,如果它可能在最大匹配中,有两种情况: $1.(u,v)$是当前方案的匹配边. $2.$可以沿着$( ...

  4. tarjan求双联通分量(割点,割边)

    之前一直对tarjan算法的这几种不同应用比较混淆...我太弱啦! 被BLO暴虐滚过来 用tarjan求点双,很多神犇都给出了比较详细的解释和证明,在这里就不讲了(其实是这只蒟蒻根本不会orz) 这里 ...

  5. 编程菜鸟的日记-初学尝试编程-C++ Primer Plus 第4章编程练习2

    #include <iostream>#include <string>int main(){ using namespace std; string name; string ...

  6. 编程菜鸟的日记-初学尝试编程-寻找等长数组A与B(所含元素相同,顺序不同)相匹配的元素即a[i]=b[j]

    #include <iostream> using namespace std; void matching(int a[],int b[],int N) { int i=0; while ...

  7. 初学JDBC的一些总结(二)

    一.简单介绍PreparedStatement 和Statement的区别: PreparedStatement是用来执行SQL查询语句的API之一,Java提供了 Statement.Prepare ...

  8. hdu6024 Building Shops(区间dp)

    https://cn.vjudge.net/problem/HDU-6024 分开考虑某一点种与不种,最后取二者的最小值. dp[i][1] = min(dp[i-1][0], dp[i-1][1]) ...

  9. ibatis中使用缓存

    简单在ibatis中使用cache 首先设置SqlMapConfig.xml中<settings/>节点的属性cacheModelsEnabled="true"     ...

  10. 集合总结--ArrayList、LinkedList、HashMap

      一.概述        ArrayList:数组集合. 查询.修改.新增(尾部新增)快,删除.新增(队列中间)慢,适用于查询.修改较多的场景.        LinkedList:双向链表集合.查 ...