英文:
API call not working on build, but working in development
问题
try {
const response = await fetch("http://api.open-notify.org/iss-now.json");
const data = await response.json();
return data;
} catch (error) {
console.log(error);
}
}
getIssData()
.then((data) => {
setIssData(data);
})
.catch((err) => {
console.log(err);
});
}, [issData]);
非常困惑
我再次使用React，这是一个ISS跟踪器，使用useEffect钩子在Cesium JS 3D地球上实时绘制ISS的API - 一切都很正常，但我有一个条件语句
{ISS ? {return a bunch of html} : Loading...}
我删除了三元运算符以查看是否是这个问题，但不是的
我困惑了，有人能帮忙吗？
英文:
I'm making this API call to the coordinates of the ISS (International Space station)
try {
const response = await fetch("http://api.open-notify.org/iss-now.json");
const data = await response.json();
return data;
} catch (error) {
console.log(error);
}
}
then I'm exporting that into my Dashboard.jsx component
useEffect(() => {
getIssData()
.then((data) => {
setIssData(data);
})
.catch((err) => {
console.log(err);
});
}, [issData]);
Everything works fine in development but on build I get the error
index-83da8be1.js:2830 Mixed Content: The page at 'https://imaginative-
blancmange-b561ab.netlify.app/' was loaded over HTTPS, but requested an
insecure resource 'http://api.open-notify.org/iss-now.json'. This
request has been blocked; the content must be served over HTTPS.
So I change it to HTTPS And then I simply get
Failed to load resource: net::ERR_CONNECTION_REFUSED
Very confused
I am using React once again and this is an ISS Tracker that gets the API of the ISS and plots it real time with the use effect hook on a Cesium JS 3d globe - everything works fine, but I have a conditional
{ISS ? {return a bunch of html} : Loading...
I removed the ternary to see if it was that and it wasn't
I am stumped y'all 
anything helps
答案1
得分: 1
问题在于你正试图在https的情况下访问一个http资源。对于你的情况，你可以将所有非https资源视为http，方法是在你的html文件中应用这个meta标签：
在使用Netlify时，你可以将非安全的外部资源重写代理到你的应用的API。查看重写和代理中的Proxy to another service。这里有一个很好的解释，还有这里。
保存一个名为**_redirects**的纯文本文件，不带文件扩展名，放到你站点的发布目录中，包含以下内容：
/api/* http://api.open-notify.org 200!
然后，不再使用：
const response = await fetch('http://api.open-notify.org/iss-now.json')
而是使用：
const response = await fetch('/api/iss-now.json')
英文:
The issue is you are trying to access a http resource while on https. For your situation, you can treat all non-https resources as http by applying this meta tag to your html file:
When using Netlify, you can rewrite proxy the non-secure external resource to your app's API. Check out Proxy to another service inside of Rewrites and proxies. Here is a good explanation as well as here.
Save a plain text file called _redirects without a file extension to the publish directory of your site containing:
/api/* http://api.open-notify.org 200!
Then instead of:
const response = await fetch('http://api.open-notify.org/iss-now.json')
You would use:
const response = await fetch('/api/iss-now.json')
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论