API 在 localhost 中工作，但在服务器中上传时无法工作答案

【问题标题】：API working in localhost but not working while uploading in serverAPI 在 localhost 中工作，但在服务器中上传时无法工作
【发布时间】：2022-11-11 12:34:43
【问题描述】：

我创建了一个网站 example.com，其中有两个名为“服务”和“想法”的部分是动态数据。来自http://api.example.com/ourservice.json & http://api.example.com/ideas.json

在我的项目中，当我在 localhost 中运行它时，它正在从 API 中获取这些数据，但是当我在服务器中上传 react build 文件夹时，它并没有获取这些数据。

有什么我想念的吗？是API的问题吗？

在 api.example.com 的配置文件的 nginx 中，我有这个配置

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 *;
    }
}

有什么我想念的吗！

【问题讨论】：

标签： javascript reactjs nginx

【解决方案1】：

以下链接解释了此问题的原因以及如何解决它。总之，我想告诉你，因为你调用的服务没有ssl证书，必须调用https，所以在浏览器控制台很容易看到错误

How to fix "insecure content was loaded over HTTPS, but requested an insecure resource"

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

在 StackOverflow 上搜索后，我找到了答案，有两种方法可以解决它。第一件事是将 SSL 添加到 API URL。

第二件事最初由@buzatto 回答here。

“这与在您的网站加载 https 时以 http 提供 api 的事实有关，因此浏览器会阻止请求。

由于您无法控制第 3 方 api，您可以解决添加元标记 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 的问题

【讨论】：