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服务器跨域问题浏览器同源策略

[flask] flask api + vue 跨域问题

跨域访问方法介绍--使用片段识别符传值

前端开发用nginx代理服务器解决服务器跨域问题及跨域访问https访问(mac系统下)

使用 Flask 为使用 create-react-app 创建的前端提供服务