API working in localhost but not working while uploading in server

Question

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

score 2 · Accepted Answer · answered Jun 10 '22 at 09:26

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

score 1 · Answer 2 · answered Jun 07 '22 at 18:42

1

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"

answered Jun 07 '22 at 18:42

Sina Ramezani

11
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 07 '22 at 19:36

score 1 · Answer 3 · answered Apr 18 '23 at 23:13

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.

API working in localhost but not working while uploading in server

3 Answers3