I have created a website example which have 2 section called "service" & "ideas" are dynamic data. Which are ing from .json & .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.example'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/example_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.example;

    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!

I have created a website example. which have 2 section called "service" & "ideas" are dynamic data. Which are ing from http://api.example./ourservice.json & http://api.example./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.example.'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/example_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.example.;

    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!

• javascript
• reactjs
• nginx

3 Answers 3

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"> "

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"

I encountered a similar issue - My NodeJs API was working fine locally with postman, but failing to work after deployment even though CORS was in place.

A request could even access the database(it could create database entries), but will fail afterwards.

I later discovered that I failed to add some new environment variables that I added to the project.

So update your remove environment with all necessary variables and see.