Access to XMLHttpRequest Cros 跨域报错的，参数导致问题

0、媒介

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

1. # 上传图片接口
2. @app.route("/upload_image", methods=["POST"])
3. def upload_image():
4.     data = request.json
5.     bucket_name = data.get("bucket_name")
6.     directory_path = data.get("directory_path")
7.     image_path = data.get("image_path")
9.     if not all([bucket_name, directory_path, image_path]):
10.         return jsonify({"status": "error", "message": "缺少必要的参数"})
12.     result = bucket.upload_image(bucket_name, directory_path, image_path)
13.     return jsonify(result)
15. # 获取图片外链接口
16. @app.route("/get_image_url", methods=["GET"])
17. def get_image_url():
18.     bucket_name = request.args.get("bucket_name")
19.     image_path = request.args.get("image_path")
21.     if not all([bucket_name, image_path]):
22.         return jsonify({"status": "error", "message": "缺少必要的参数"})
24.     result = bucket.get_image_url(bucket_name, image_path)
25.     return jsonify(result)

复制代码

2、前端接口封装

1. import http from "./axios";
3. // 上传图片信息
4. export function uploadImage(data: any) {
5.   return http({
6.     url: "/upload_image",
7.     method: "post",
8.     data,
9.   });
10. }
11. export const uploadData = {
12.     bucket_name: "cloud",
13.     directory_path: "detected",
14.     image_path: "url", // 图片本地存储路径
15. }
17. // 获取图片下载外链
18. export function getImageUrl(bucket_name: string, image_path: string) {
19.   return http({
20.     url: "/get_image_url",
21.     method: "get",
22.     params: {
23.       bucket_name,
24.       image_path, // 图片minio存储路径
25.     },
26.   });
27. }

复制代码

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

这里以获取外链为例

1. <script setup>
2. import { getImageUrl } from '@/api/detected/detectedAPI'
3. import { ElMessage } from 'element-plus';
4. const handleFileChange = (event) => {
5.   const fileName = event.target.files[0];
6.   getImageUrl(fileName,'cloud/detected/'+fileName).then(res => {
7.     console.log(res)
8.     ElMessage.success('获取外链成功')
9.   }).catch(err => {
10.     console.log(err)
11.   })
12. };
13. </script>
15. <template>
16.   <div>
17.     <input type="file" @change="handleFileChange" />
18.   </div>
19. </template>

复制代码

4、出现报错

5、debug

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

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

至此办理所谓跨域报错。

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