I have created a website ideahubbd.com which have 2 section called "service" & "ideas" are dynamic data. Which are coming from http://api.ideahubbd.com/ourservice.json & http://api.ideahubbd.com/ideas.json
in my project while I am running it in localhost it's fetching those data from the API, But when I uploaded the react build folder in server it's not fetching those data.
Is there anything I am missing? Is it the API's problem?
in nginx of the api.ideahubbd.com's config file I have this config
server {
# Binds the TCP port 80.
listen 80;
# Root directory used to search for a file
root /var/www/html/ideahubbd_static_api;
# Defines the file to use as index page
index index.html index.htm;
# Defines the domain or subdomain name.
# If no server_name is defined in a server block then
# Nginx uses the 'empty' name
server_name api.ideahubbd.com;
location / {
# Return a 404 error for instances when the server receives
# requests for untraceable files and directories.
try_files $uri $uri/ =404;
add_header Access-Control-Allow-Origin *;
}
}
Is there anything I am missing!
The following link explains the reason for this problem and how to fix it. In short, I want to tell you that because the services you are calling do not have an ssl certificate and must be called https, you can easily see the error in the browser console
How to fix "insecure content was loaded over HTTPS, but requested an insecure resource"
After searching on StackOverflow I found the answer, there was 2 way to solve it. The first thing is adding SSL to the API URL.
and the second thing which was originally answered here by @buzatto.
"that's related to the fact that the api is served at http while your site is loaded https, so the browser blocks the request.
since you have no control over the fact that the 3rd party api, you can solve the issue adding the meta tag <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> "