Question

我正在尝试在vuejs前端使用API。我在获取时遇到了一些困难。

我必须使用FormData将文件发送到api。每次我遇到这个错误： “ TypeError：尝试获取资源时出现NetworkError。” 带有“访问控制允许来源”警告。

在控制台网络标签中，我可以看到我的呼叫成功。

我已经尝试使用axios，并且在不同的浏览器上遇到了相同的跨源错误。

首先，我尝试使用no-cors模式，该错误消失了，但是我还有另一个错误：“ SyntaxError：JSON.parse：JSON数据第1行第1列的数据意外结束”

我的API响应是一个json。我发现此错误可能是由no-cors模式引起的。

        let formData = new FormData();

        let blob = await fetch(this.audioUrl).then(r => r.blob());

        formData.append("wav", this.blobToFile(blob, "audio"));
        formData.append("apikey", process.env.VUE_APP_API_KEY);

        var url = new URL(process.env.VUE_APP_API_URL)


        console.log(url)
        fetch(url, {
            mode: 'no-cors',
            method: 'POST',
            body: formData,
        }).then(function(response) {
            console.log(response)
            response.json().then(function(json){
                console.log(json);
                console.log(response.status)
            })
        });

我无法编辑api，有人可以帮助我解决此问题吗？

尝试获取资源Access-Control-Allow-Origin警告时出现NetworkError

0 个答案: