IT评测·应用市场-qidao123.com

标题: Access to XMLHttpRequest Cros 跨域报错的，参数导致问题 [打印本页]

作者: 干翻全岛蛙蛙 时间: 2025-2-16 06:39
标题: Access to XMLHttpRequest Cros 跨域报错的，参数导致问题
0、媒介

需求：实现python封装将本舆图片存储至minio中的POST接口和获取图片下载外链的get接口，实现前端调用实现图片上传和下载
1、后端接口

# 上传图片接口
@app.route("/upload_image", methods=["POST"])
def upload_image():
data = request.json
bucket_name = data.get("bucket_name")
directory_path = data.get("directory_path")
image_path = data.get("image_path")
if not all([bucket_name, directory_path, image_path]):
return jsonify({"status": "error", "message": "缺少必要的参数"})
result = bucket.upload_image(bucket_name, directory_path, image_path)
return jsonify(result)
# 获取图片外链接口
@app.route("/get_image_url", methods=["GET"])
def get_image_url():
bucket_name = request.args.get("bucket_name")
image_path = request.args.get("image_path")
if not all([bucket_name, image_path]):
return jsonify({"status": "error", "message": "缺少必要的参数"})
result = bucket.get_image_url(bucket_name, image_path)
return jsonify(result)

复制代码

2、前端接口封装

import http from "./axios";
// 上传图片信息
export function uploadImage(data: any) {
return http({
url: "/upload_image",
method: "post",
data,
});
}
export const uploadData = {
bucket_name: "cloud",
directory_path: "detected",
image_path: "url", // 图片本地存储路径
}
// 获取图片下载外链
export function getImageUrl(bucket_name: string, image_path: string) {
return http({
url: "/get_image_url",
method: "get",
params: {
bucket_name,
image_path, // 图片minio存储路径
},
});
}

复制代码

3、参数输入，调用前端接口

这里以获取外链为例

<script setup>
import { getImageUrl } from '@/api/detected/detectedAPI'
import { ElMessage } from 'element-plus';
const handleFileChange = (event) => {
const fileName = event.target.files[0];
getImageUrl(fileName,'cloud/detected/'+fileName).then(res => {
console.log(res)
ElMessage.success('获取外链成功')
}).catch(err => {
console.log(err)
})
};
</script>
<template>
<div>
<input type="file" @change="handleFileChange" />
</div>
</template>

复制代码

4、出现报错

5、debug

举行排错:起首,后端做好了跨域并使用apifox测试，可成功获取下载外链，排除后端书写接口问题，接下来查抄前端代码，是否存在调用时机问题，使用console.log获取发现时机按照预期，最后即查抄传入参数时候是否精确（这里的查抄框较小其中的报错刚好隐藏了参数导致排错较慢），打印可见

一个时object一个是目的参数，同时将查抄框拉大也可见

至此办理所谓跨域报错。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)