zoukankan      html  css  js  c++  java
  • 【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,
      };
    }());
  • 相关阅读:
    Hive学习笔记记录
    Hadoop学习笔记记录
    python学习笔记记录
    2018高级软件工程——助教总结
    Week3 第二次结对编程
    Week2 第一次结对编程
    Week1 博客作业
    最后一周总结
    阅读和提问3
    个人项目 案例分析
  • 原文地址:https://www.cnblogs.com/colipso/p/9376935.html
Copyright © 2011-2022 走看看