javascript - API working in localhost but not working while uploading in server - Stack Overflow

admin管理员组

文章数量:1356216

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

Share Improve this question Follow edited Oct 26, 2022 at 7:34 Mohammad Fathi Rahman asked Jun 7, 2022 at 18:23 Mohammad Fathi RahmanMohammad Fathi Rahman 13711 gold badge22 silver badges1414 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

本文标签： javascriptAPI working in localhost but not working while uploading in serverStack Overflow