Reactjs 获取无法加载资源：net:：ERR\u CONNECTION\u在解决问题Web API错误后超时

我一直在部署react web应用程序，当我使用静态服务器时，它对我来说运行得非常好。但当我托管该应用程序时，它无法从API获取数据。 它给出的错误是

混合内容：“（我的应用程序链接）”处的页面通过HTTPS加载，但请求了不安全的资源（“API链接”）。此请求已被阻止；内容必须通过HTTPS提供

为了解决此错误，我将

包含在我的react应用程序文件夹的

public

目录中的

index.html

中的

中。现在我得到一个错误，显示

未能加载资源：网络：：错误\u连接\u超时\u

我获取API的代码

import React，{useState，useffect}来自“React”
导出默认函数App（）{
const[posts，setposts]=useState（[]）；
const[error，setError]=useState（null）；
const[isLoaded，setIsLoaded]=useState（false）；
常量url=http://devapi.quinn.care/graph'; 
useffect（（）=>{
常数数据={
//为简洁起见未显示
} 
常量请求选项={
方法：“POST”，
标题：{'Content-Type'：'application/json'}，
正文：JSON.stringify（数据）
};
获取（url、请求选项）
.then（response=>response.json（））
。然后（数据=>{
setIsLoaded（真）；
//为简洁起见未显示
},
（错误）=>{
setIsLoaded（真）；
设置错误（错误）；
}
)
}, []);
如果（错误）{
返回（错误：{ERROR.message}）；
}
否则，如果（！已加载）{
返回（加载…）；
}
否则{
返回(
为简洁起见未显示
)
}
}

显示您发出请求的代码，如果是您自己的API，则显示您的API代码！