在项目中将图片上传到SM.MS报错 [vite] http proxy error

语言及配置：vue、vantui、vite

报错信息

[vite] http proxy error:
Error: read ECONNRESET
    at TLSWrap.onStreamRead (node:internal/stream_base_commons:217:20)

或者

[vite] http proxy error:
Error: connect ETIMEDOUT 2606:4700:3037::6815:532d:443
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)

解决办法

官方文档：SM.MS v2 API Docs。在官方文档中指定上传的Url是：https://sm.ms/api/v2/ ，但还是无法上传成功，最后将Url改为：https://smms.app/api/v2 成功解决。

页面代码

<template>
    <div class="upload-container">
        <van-uploader
            v-model="fileList"
            :max-count="1"
            :after-read="afterRead"
        />
        <div v-if="imgUrl" class="result">
            <p>上传成功，图片链接为：</p>
            <a :href="imgUrl" target="_blank">{{ imgUrl }}</a>
        </div>
        <div v-if="errorMsg" class="error">
            <p>上传失败，错误信息为：</p>
            <p>{{ errorMsg }}</p>
        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            fileList: [],
            imgUrl: "",
            errorMsg: "",
        };
    },
    methods: {
        afterRead(file) {
            // 创建表单数据对象
            let formData = new FormData();
            // 添加图片文件
            formData.append("smfile", file.file);
            // 发送 POST 请求到 sm.ms 的 API 地址
            axios.post("/useSMMS/upload", formData, {
                    headers: {
                        "Content-Type": "multipart/form-data",
                        "Authorization": " ", //这里填上自己账号的ApiTocken
                    },
                })
                .then((res) => {
                    // 处理响应数据
                    if (res.data.success) {
                        // 如果成功，显示图片链接
                        this.imgUrl = res.data.data.url;
                        this.errorMsg = "";
                    } else {
                        // 如果失败，显示错误信息
                        this.imgUrl = "";
                        this.errorMsg = res.data.message;
                    }
                })
                .catch((err) => {
                    // 处理异常情况
                    this.imgUrl = "";
                    this.errorMsg = err.message;
                });
        },
    },
};
</script>

<style scoped>
.upload-container {
    margin: 20px;
}
.result {
    color: green;
}
.error {
    color: red;
}
</style>

在vite.config.ts解决跨域问题

module.exports = {
    server: {
        proxy: {
            '/useSMMS': {
                // target: 'https://sm.ms/api/v2',
                target: 'https://smms.app/api/v2',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/useSMMS/, '') // 不可以省略rewrite
            }
        }
    }
}

注意：不建议在前端透露ApiTocken

注意：不建议在前端透露ApiTocken

注意：不建议在前端透露ApiTocken