【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,
  };
}());