关于前后端分离时无法访问服务端图片的nginx配置问题

storage 配置直接拿掉就行了

@arvin-hermit 一开始是没有storage配置的，那么我理解的就是如果访问http://域名/storage/images/xxx.jpg这个图片就会去前端项目目录里面找，但是图片是放到后端目录里面（和前端项目不在同一个文件夹内），所以我就加了一个storage配置

改为

location /storage {
    root /www/wwwroot/服务端/public;
}

@小李世界 试过了，没有效果，我直接通过IP和端口的形式访问是可行的：

http://IP地址:9000/storage/images/xxx.jpg

但是怎么配置路径都是不行的……

目前是这样的需求：

1.前后端分离（前端和后端代码在不同的目录）
2.后台是使用laravel-admin搭建的

而且现在后台地址也不知道该咋配置😂目前虽然能进后台但是很多静态资源报404的错误，应该是跨域了

location /admin {
    proxy_pass http://IP:9000;
}

server {
    listen 80;
    server_name ecms.betterde.com;

    location / {
        index index.html;
        root /web/sites/php/ecms/spa;
        try_files $uri $uri/ /index.html;
    }

    location /storage {
        alias /web/sites/php/ecms/api/public/storage;
    }

    location /api {
        index index.php;
        root /web/sites/php/ecms/api/public;
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        root /var/local/web/sites/php/ecms/api/public;
        fastcgi_pass php-fpm:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

我是这么配置的，图片可以正常加载！目录结构如下：

ecms
├── api
│   ├── Envoy.blade.php
│   ├── LICENSE
│   ├── README.md
│   ├── _ide_helper.php
│   ├── app
│   ├── artisan
│   ├── babel.config.js
│   ├── bootstrap
│   ├── composer.json
│   ├── composer.lock
│   ├── config
│   ├── database
│   ├── docker-compose-production.yml
│   ├── docker-compose.yml
│   ├── ecms.betterde.com.conf
│   ├── package.json
│   ├── phpunit.xml
│   ├── public
│   ├── resources
│   ├── routes
│   ├── server.php
│   ├── spa
│   ├── storage
│   ├── tests
│   ├── vue.config.js
│   └── yarn.lock
└── spa
    ├── css
    ├── favicon-128.png
    ├── favicon-16.png
    ├── favicon-32.png
    ├── favicon-48.png
    ├── favicon-64.png
    ├── fonts
    ├── img
    ├── index.html
    ├── js
    └── keywords.csv

应该是这样吧。

location /storage {
    root /www/wwwroot/服务端/public;
}

写成 /www/wwwroot/服务端/public/storage,

那么最终访问的地址是 /www/wwwroot/服务端/public/storage/storage

如果还不行，就看一下错误日志，可以看到访问图片的路径地址。

@ligkwww 诡异的是，即使报404，nginx的error日志里面也没有记录错误信息，这种我也试过，还是不行

@GeorgeKing 谢谢，你这种感觉有点靠谱，目前还没找到原因，还在排查中

竟然是前后分离，那就不要这么搞吧

访问图片还是用后端域名

example.com

api.example.com/storage/image.png

是的，目前是通过这种方法应急，还是希望找到能全部用一个域名的方案

    location /storage {
         root /www/wwwroot/后端项目路径/public/storage;
    }

改为

    location /storage {
         root /www/wwwroot/后端项目路径/public;
    }

就可以了

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log off;
    }

你前端有这玩意,优先级高于

location /api/v1/{
         #如果为/api/v1/开始则走php
         proxy_pass http://localhost:9000;
    }
location /storage {
         root /www/wwwroot/后端项目路径/public/storage;
    }

所以把那个注了把,那个东西应该是"宝塔"之关给配置的,我这公司就用"宝塔",之前没用过,坑了我好一会.