☰

Nginx 代理站点无法找到站点上的静态图像文件

tag-icon • tag-icon nginx
Nginx 代理站点无法找到站点上的静态图像文件

我在根路径的 media 子目录中保存了一个 jpg 文件，我使用 Nginx 来提供该文件。但是当我打开浏览器时，开发人员控制台中显示此信息。

http://localhostmedia/bg.jpg无法加载资源：找不到具有指定主机名的服务器。

我不知道哪里出了问题。Nginx 日志中没有错误。我正在将其部署在本地服务器上，而不是互联网上。这是我的 Nginx 设置：

upstream ws_upstream {
    server 127.0.0.1:8888;
    keepalive 64;
}

server {
    listen 0.0.0.0:80 default_server;
    #listen [::]:80 default_server ipv6only=on;

    root /usr/local/share/html;
    index index.html index.htm;

    server_name ws_server;


    location / {
        try_files $uri $uri/ @my_upstream;
    }

    location = /index.html {
        try_files /index.html $uri/ =404;
        expires 30d;
    }

    location ~* \.(gif|jpg|jpeg)$ {
        root /usr/local/share/html/media;
        expires 10d;
    } 

    location @my_upstream {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;

        proxy_redirect off;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass http://ws_upstream;
        proxy_read_timeout 240s;
    }

}

我应该对我的文件进行哪些更改？

更新：

使用curl -i http://localhost将显示我引用的 javascript 文件的源代码index.html。

我的客户端根路径下的文件夹结构：

/usr/local/share/html
    -- index.html
    -- main.js
    media
       -- bg.jpg

这是我的index.html文件：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no, email=no" />
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="HandheldFriendly" content="true">
  <meta name="MobileOptimized" content="320">
  <meta name="screen-orientation" content="portrait">
  <meta name="x5-orientation" content="portrait">
  <meta name="msapplication-tap-highlight" content="no">
  <title>My project</title>
  <style>
    *{margin:0;padding: 0;}
    *:focus {
      outline: none;
    }
    html,body,#cas{width:100%;height:100%;overflow: hidden;}
    .input {
      border:1px solid #1099bb;
      border:none;
      padding-left: 14px;
      padding-right: 14px;
      border-radius:18px;
      -moz-border-radius:18px;
      -webkit-border-radius:18px;
    }
  </style>
</head>
<body>
<script type="text/javascript" src="/main.js"></script></body>
</html>

以下是一些最近的访问日志：

2017/08/16 12:58:49 [error] 1883#0: *3 open() "/usr/local/share/html/media/media/bg.jpg" failed (2: No such file or directory), client: ::1, server: ws_server, request: "GET /media/bg.jpg HTTP/1.1", host: "localhost", referrer: "http://localhost/"

2017/08/16 13:12:06 [error] 2111#0: *5 open() "/usr/local/share/htmlindex.html" failed (2: No such file or directory), client: ::1, server: ws_server, request: "GET /__webpack_hmr HTTP/1.1", host: "localhost", referrer: "http://localhost/"

答案1

jpeg 请求添加了两次媒体，因为您已在 URL 和配置中指定了它。要修复 jpeg 的问题，请更改此

location ~* \.(gif|jpg|jpeg)$ {
  root /usr/local/share/html/media; # remove media
  expires 10d;
}

到

location ~* \.(gif|jpg|jpeg)$ {
  root /usr/local/share/html;
  expires 10d;
}

我对 index.html 错误不是 100% 确定。我怀疑您在某个地方漏掉了一个斜线，或者您的浏览器发送的请求不太正确。根据我上面给出的答案和那个线索，也许您可​​以思考一下，看看是否能想出点什么。

答案2

无法找到，因为你指向了错误的路径/url，它应该是这样的

http://localhost/static/bg.jpg

但你指的是

http://localhostmedia/bg.jpg

因此浏览器将尝试连接到名为

本地主机媒体

相关内容