React-使用axios将图像上传到Imgur，返回ERR_HTTP2_PROTOCOL_ERROR

Question

我正在尝试向Imgur API发送POST请求-上传图像。

我的Imgur应用程序是公共的-只需要客户端ID。

运行时总是出现此错误：

错误：网络错误在createError(createError.js:16(在XMLHttpRequest.handleError(xhr.js:84(处"；岗位https://api.imgur.com/3/imagenet:：ERR_HTTP2_PROTOCOL_ERROR"；

当我手动发送请求(使用Postman(时，它就工作了。邮差成功

设置：

• WSL2上的本地开发-Ubuntu 20.04LTS
• React
• 反作用通风wysiwyg

我的编辑器：

<Editor
editorState={content}
onEditorStateChange={(e) => setContent(e)}
wrapperClassName="demo-wrapper"
editorClassName="demo-editor"
toolbar={{
image: {
uploadCallback: uploadImageCallBack,
alt: { present: true, mandatory: false },
},
}}
/>

上传我尝试过的功能

尝试#1-axios实现

function uploadImageCallBack(file) {
return new Promise<void>((resolve, reject) => {
const data = new FormData();
data.append("image", file);
const config = {
headers: {
Authorization: "Client-ID xxx",
},
};
axios.post("https://api.imgur.com/3/image", data, config).then((res) => {
console.log(res);
resolve()
}).catch(err => {
console.log(err)
reject()
});
});
}

尝试#2-从文档中实现XHRhttps://github.com/jpuri/react-draft-wysiwyg/blob/master/stories/ImageUpload/index.js

function uploadImageCallBack(file) {
return new Promise(
(resolve, reject) => {
const xhr = new XMLHttpRequest(); // eslint-disable-line no-undef
xhr.open('POST', 'https://api.imgur.com/3/image');
xhr.setRequestHeader('Authorization', 'Client-ID xxx');
const data = new FormData(); // eslint-disable-line no-undef
data.append('image', file);
xhr.send(data);
xhr.addEventListener('load', () => {
const response = JSON.parse(xhr.responseText);
resolve(response);
});
xhr.addEventListener('error', () => {
const error = JSON.parse(xhr.responseText);
reject(error);
});
},
);
}

Answer 1

我发现了这个问题。

参考：Imgur api响应代码403，服务器错误429

这个解决方案非常成功。Imgur阻止来自localhost的所有请求。

尽管由于WSL网络，您将无法访问0.0.0.0的服务器。

WSL Ubuntu解决方案：

hostname -I

在package.json.旁边创建.env文件

HOST=<output from hostname -I>