React + flask跨域服务及访问
Posted colipso
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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‘: ‘0‘ , ‘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跨域服务及访问的主要内容,如果未能解决你的问题,请参考以下文章
Flask提供json api跨域访问,ajax接收json数据
Python 使用CORS跨域资源共享解决flask服务器跨域问题浏览器同源策略