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. PhotoshopCC 2017安装破解 + cuterman

    之前安装了PhotoshopCC 2017版本的软件,但是绿色版的(安装简介.使用方便).但是在随着Adobe公司对设计的不断追求和工具的不断更新,更加强大.更加优秀的设计插件和工具不断出新,最近朋友 ...

  2. BZOJ4081 : [Wf2014]Skiing

    首先将目标点按$y$坐标从小到大排序. 如果加速度为$0$,那么只要贪心走一遍即可. 否则考虑DP,设$f[i][j]$表示从$i$点以速度$j$出发最多能经过多少个点. 注意到将DP值相同的合并可以 ...

  3. X-factor Chains [POJ3421] [素数]

    Description    给定一个正整数X, 一个长度为m的X-因子链是由m+1个整数组成的.其中    1 = X0, X1, X2, …, Xm = X 满足Xi < Xi+1 且 Xi ...

  4. 将一个C++的AES加密算法(有向量的)翻译成C#

    /****************************************************************************** Copyright (c) 2012-2 ...

  5. linux shell中break和continue跳出循环

    到目前为止,我们已经看到了,创建循环和使用循环来完成不同的任务.有时候,你需要停止循环或跳过循环迭代. 在本教程中,您将了解以下两个语句用于控制 Shell 循环: break 语句 continue ...

  6. python测试开发django-53.xadmin里Model分类管理(proxy=True)

    前言 django的xadmin后台使用xadmin.site.register注册时,一张表只能注册一次,在后面页面上只能显示出一个页面. 有时候我们想从里面筛选出自己想要的数据,比如有全部的学生成 ...

  7. 搭建memcached使用:/usr/bin/phpize 安装memcached扩展的时候报错

    Can't find PHP headers in /usr/include/phpThe php-devel package is required for use of this command ...

  8. ethtool 解决网卡丢包严重和网卡原理

      1 概述 最近业务上老有问题,查看发现overruns值不断增加,学习了一下相关的知识.发现数值也在不停的增加.发现这些 errors, dropped, overruns 表示的含义还不大一样. ...

  9. zookeeper三节点集群安装记录

    以下是3个节点的zk安装记录. 下载 下载地址: http://mirrors.shu.edu.cn/apache/zookeeper/ cd /data/opt/zk wget http://mir ...

  10. NOIP2010提高组 机器翻译

    OJ提交地址:https://www.luogu.org/problemnew/show/P1540 http://noi.openjudge.cn/ch0112/07/ 总时间限制: 1000ms  ...