乌兔 - nginx映射华为云OBS，通过处理Content-Disposition实现直接预览，而不是下载文件。

1、问题描述

通过华为云的官方文档，实现了nginx映射OBS来访问文件

我的nginx配置文件如下

location /profile/ {
    proxy_pass  https://test.obs.cn-north-4.myhuaweicloud.com/profile/;  #此处填写OBS桶访问域名，以http://或https://开头
    index  index.html index.htm ;
    proxy_set_header Host $proxy_host;
}

这样配置，文件是可以正常下载的，包括在<img>标签的显示也是正常的

但是后来我们做了一个html的文件，想要直接在页面中展示。但是实际上点了连接之后，是进行的html文件的下载

由此引出来一个问题，能不能不要下载，直接可以预览

2、原因调查经过

（1）默认情况下，nginx是可以根据url的后缀自动识别文件类型，如果是可预览的类型（html，png，jepg，xml）等，是直接可以在浏览器预览的

可以考虑加上一下配置

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

（2）我的nginx的配置中其实是已经有了，但是访问url依然还是文件下载。

看了下header，才发现问题的所在

null

可以看到header中有Content-Disposition: attachment。有了这个就表示，该文件固定是用下载的模式

找到了这个之后，就知道处理的方向了，把这个配置改成inline即可

（3）我首先做的尝试就是在配置文件中主动添加header配置

location /profile/ {
    proxy_pass  https://test.obs.cn-north-4.myhuaweicloud.com/profile/;  #此处填写OBS桶访问域名，以http://或https://开头
    index  index.html index.htm ;
    proxy_set_header Host $proxy_host;
    #设置Content-Disposition为inline，使文件能够预览，而不是强制下载
    add_header Content-Disposition 'inline';
}

但是我添加上了这个配置之后，访问文件url竟然报错了

ERR_RESPONSE_HEADERS_MULTIPLE_CONTENT_DISPOSITION

null

这个错误的意思就是header中有多个Content-Disposition配置，浏览器就报错了

（4）接下来就是排查为什么会有多个

首先是查看了nginx的配置，发现只有这一处。也就是不是我的配置错误导致的

查资料中找到一种可能性，是华为云OBS返回了Content-Disposition: attachment这个配置了，然后的nginx配置中又设置了一遍Content-Disposition: inline

导致了该设置的重复

3、最终的解决方式

既然华为云返回了，那我们就先把这个配置项删掉，然后再重新加，这样就能保证唯一了

proxy_hide_header Content-Disposition; add_header Content-Disposition 'inline';

我的有效的配置如下

location /profile/ {
    proxy_pass  https://test.obs.cn-north-4.myhuaweicloud.com/profile/;  #此处填写OBS桶访问域名，以http://或https://开头
    index  index.html index.htm ;
    proxy_set_header Host $proxy_host;
    #设置Content-Disposition为inline，使文件能够预览，而不是强制下载
    # 清除后端返回的 Content-Disposition
    proxy_hide_header Content-Disposition;
    # 再由 Nginx 设置
    add_header Content-Disposition 'inline';
}

试了下，文件可以正常的预览了

nginx映射华为云OBS，通过处理Content-Disposition实现直接预览，而不是下载文件。

1、问题描述

2、原因调查经过

3、最终的解决方式

全部评论