Api-前后端串连

端口号识别

前端和后端项目目前都在本地运行，但是端口号不同
前端：http://localhost:5173/
后端：http://localhost:5000/
不同端口号视为不在同一个域之下。

解决跨域的方法

1. 使用Flask的CORS：
   • 您可以在后端（例如使用 Flask）应用 CORS（跨域资源共享）中间件，以允许来自不同源的请求。
   • 例如，如果您使用 Flask，可以通过安装 flask-cors 库来解决：pip install flask-cors。然后，在Flask应用中添加代码：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许所有来源的请求

@app.route('/api/data', methods=['GET'])
def get_data():
    return jsonify({'message': 'Hello, World!'})

2. 设置代理（开发时）：
   • 如果您使用工具如 Vue CLI 或 Create React App，可以在开发服务器配置中设置代理，将请求代理到后端。
   • 我在Vite中添加代理，以解决跨域问题。可以在 vite.config.js 文件中添加 server.proxy 配置：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000', // 后端地址
        changeOrigin: true,
      }
    }
  }
})

在前端项目中添加API

import axios from "axios";

const fetchMatchJSONData = async (stationValue) => {
    try {
        const matchResponse = await axios.get(
            `/api/match_data/${stationValue}/merged_matched_points.json` // 使用代理配置的路径
        );
        const matchJSON = matchResponse.data;
        return matchJSON;
    }
    catch (error) {
        // 判断是否为 404 错误
        if (error.response && error.response.status === 404) {
            // 弹出提示框
            alert('匹配数据文件不存在！');
        } else {
            console.error('请求失败：', error);
        }
        throw error; // 可以根据需要抛出错误，或者做其他错误处理
    }
};
export {fetchMatchJSONData};

在Flask后端中处理请求

import flask
from flask import Flask, request, jsonify
import json
import os
from flask import send_from_directory

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello World'

@app.route('/api/match_data/<station_value>/merged_matched_points.json', methods=['GET'])
def get_match_data(station_value):
    data_directory = 'MultiMerge/dataset/match_data'

    # 构建匹配文件的路径
    file_path = os.path.join(data_directory, f'{station_value}/merged_matched_points.json')

    # 检查文件是否存在
    if os.path.exists(file_path):
        return send_from_directory(data_directory, f'{station_value}/merged_matched_points.json')
    else:
        return jsonify({'error': '文件不存在'}), 404