Nginx 无法通过互联网从 React Native 应用程序获取请求

Question

我在我的服务器上的端口 8080 上运行 Spring Boot BE，并使用 nginx 和 ssl 证书。 我已将路由器 80 和 443 上的端口转发到服务器。 另外我在 no-ip 中有 ddns。 这一切都正常工作。

现在我开始使用 React Native 和 Expo 开发移动应用程序。当我尝试调用 BE 上的某个端点时，当我在 Web 浏览器中打开它时，它可以正常工作。当我尝试在物理设备中打开它后，仅打印网络错误。 例如，我试图显示此图像：https://prieskumnici-is.ddns.net/api/img/bg/default/day.jpg 或调用此端点：https://prieskumnici-is.ddns.net/api/api/background

当我在本地模拟器中加载图像时，它也可以工作（http://192.168.1.35:8080/...）

端点是正确的，因为我在我的角度网页中使用它们

所以我认为问题出在 nginx 或 Spring boot 配置中 而且 nginx 中没有日志，BE 中的拦截器也没有收到任何请求

有一些代码：

nginx 配置

http {
  client_max_body_size 500M;

  server {
    listen 443 ssl;
    server_name prieskumnici-is.ddns.net localhost;

    ssl_certificate C:/nginx/ssl/prieskumnici-is.crt;  # Path to your SSL certificate
    ssl_certificate_key C:/nginx/ssl/prieskumnici-is.key;  # Path to your SSL private key

    large_client_header_buffers 4 8096k;

    location /api/ {
      proxy_pass http://localhost:8080; 
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location / {
      root "C:\Users\Singi\Desktop\prieskumnici\prieskumnici-ui\dist\prieskumnici-ui";
    index index.html index.htm;
      try_files $uri $uri/ /index.html;
    }

    types {
      text/html                                        html htm shtml;
      text/css                                         css scss;
      text/xml                                         xml;
      image/gif                                        gif;
      image/jpeg                                       jpeg jpg;
      application/javascript                           js mjs;
      application/atom+xml                             atom;
      application/rss+xml                              rss;
    }
  }
}

RN

return <ImageBackground source={{uri: "https://prieskumnici-is.ddns.net/api/img/bg/default/day.jpg"}} resizeMode="cover" style={{height: '100%'}}>
          <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text>Home</Text>
          </View>
       </ImageBackground>

我不知道 Spring Boot 与这个问题有什么关系

总结：API 和 nginx 不会通过互联网使用 React Native 应用程序接收来自物理设备的请求

我尝试在设备上加载任何其他 API 并且它工作正常，还尝试从其他页面加载图像并且工作正常：https://www.prieskumnici.sk/assets/img/banner_zbor.png

更新 我已经将 nginx 配置为将端口 80 代理到 BE 并且它可以工作，现在我可以显示如下图像： http://prieskumnici-is.ddns.net/api/img/bg/default/day.jpg 来自模拟器，但不是来自物理设备

Answer 1

解决方案 所以我终于想到了这一点，检查你的 SSL 证书，真的:D 我使用的是.crt代替.pem，no-ip也提供了PEM和PEM链，一定要使用PEM链 本文有帮助：https://github.com/expo/expo/issues/16451#issuecomment-1937490176