nginx配置Https--vue、springboot交互，上传图片在浏览器显示

开发项目时，本地http

vue项目启动，浏览器地址

http://localhost:8666

vue访问后端

http://localhost:8999

打包项目 nginx配置Https

nginx.conf配置

error_log  /test/log/error.log warn;
server {
        listen       8666 ssl;                                  #默认端口是80，如果端口没被占用可以不用修改
        server_name  www.test.com;
        ssl_certificate  /etc/nginx/key/server.crt;             #指定证书位置，默认在当前目录寻找
        ssl_certificate_key  /etc/nginx/key/server.key;         #指定私钥位置
        ssl_session_timeout 5m;
        
        #ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        #ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        #ssl_prefer_server_ciphers on;

        #如https为特殊端口时可使用此方式客户端访问http时自动为https
        error_page 497 301 =307 https://$http_host$request_uri; 

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root       /test/web/dist;                            #vue项目的打包后的dist位置

        location / {
            try_files $uri $uri/ @router;                    #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #文件路由路径 /file
        location /file {
           rewrite ^/file/(.*)$ /$1 break;
           root /usr/local/test/fileupload;                  #文件上传真实路径
        }
        #访问服务器后端路由路径 /manager
        location /manager {
           proxy_pass http://127.0.0.1:8999/;                #springboot项目运行所使用的端口号
       }
}

修改vue访问后端配置

'https://' + window.location.host.split(':')[0] + ':8666/manager'

vue执行npm run build，重新打包生成dist文件夹，替换原先的文件夹

浏览器查看存放在服务器的图片

上文nginx.conf已配置好路由路径与文件上传真实位置的映射关系，例如：
上传图片aac.png至真实路径/usr/local/test/fileupload，在l浏览器地址栏输入

'https://' + window.location.host.split(':')[0] + ':8666/file' + 'aac.png'

即可看到图片