端口号识别
前端和后端项目目前都在本地运行，但是端口号不同
前端：http://localhost:5173/
后端：http://localhost:5000/
不同端口号视为不在同一个域之下。
解决跨域的方法
- 使用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!'})
- 设置代理（开发时）：
- 如果您使用工具如 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