英文:
How can I consume and HTTP API in my HTTPS website
问题
我使用React构建了我的网站的前端，并将其托管在Netlify上。以下是我调用API的示例。
此站点托管在由Netlify提供的https域上。然后，我的后端是一个使用Docker Compose构建的Django应用，托管在Digital Ocean droplets上，通过HTTP提供服务。但每次我使用该站点调用API时，它返回以下错误信息：
Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource 'http:...'. This request has been blocked; the content must be served over HTTPS.
如何修复这个问题？前端是否可以采取措施解决它？
另外，如何在Digital Ocean droplets和Django上启用HTTPS？因为我已经尝试了将近三个小时，但没有成功。请帮助我。
英文:
I built the frontend of my website using React, and it is hosted on netlify. Here is an example of a call I make to my API.
fetch(`http://blabla.com/all/`, {
method: "GET",
headers: {
'Content-Type': 'application/json',
}
}).then((res) => {
return res.json();
}
).then((data) => {
let informations = data.restaurant;
// do stuff with data
}).catch((err) => {
console.log(err);
})
This site is hosted on an https domain, provided by netfily. Then, my backend is a Django app, built with Docker compose and hosted on digital ocean droplets, that serves via HTTP. But each time I can the API with the site, it returns that
Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure
resource 'http:...'. This request has been blocked; the content must be served
over HTTPS.
How can I fix this? Is there anything that can be done on the frontend to allow it?
Otherwise, how do I put the HTTPS stuff on digital ocean droplets and django? Because I spent almost three hours trying to figure it out, without being able to do so.
Please help me
答案1
得分: 1
大多数现代浏览器会阻止混合内容，如果您想调试或测试您的网站，可以在浏览器上暂时禁用此功能。
然而，建议在网站上始终使用HTTPS，使用像Let's Encrypt的解决方案可能是一个不错的起点。
请参考以下内容：
- 如何修复具有被阻止混合内容的网站
- https://stackoverflow.com/questions/18321032/how-to-get-chrome-to-allow-mixed-content/24434461#24434461
您还可以使用这些工具来检查是否仍然存在此问题：
英文:
Most modern browsers block Mixed Content, you can disable this on your browser temporarily if you want to debug or test your website.
However, it is recommended to have HTTPS everyhwere, using solutions like Certbot from let's encrypt might be a good start.
Please have a look at:
- How to fix a website with blocked mixed content
- https://stackoverflow.com/questions/18321032/how-to-get-chrome-to-allow-mixed-content/24434461#24434461
You can also use tools like these to check if you still have this issue:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论