Nginx无法访问静态资源，Nginx访问静态资源没有带端口导致静态资源无法访问，内网穿透后无法访问本地静态资源文件 js css

​

使用内网穿透后 会生成一个免费的二级域名，通过此域名+远程服务器端口 可以映射到本地的 端口

如：http://cn-2.openfrp.top:8888 8888是远程服务器端口 映射本地端口80；

错误的Nginx配置如

server {
    listen 80;
    server_name test-emlog.com;
    root /www/wwwroot/emlog;
    index index.html index.htm index.php;

    location /blog {
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://127.0.0.1:89/;
    }

    location ~* \.(eot|ttf|woff|svg|otf)$ {
        add_header Access-Control-Allow-Origin *;
    }
}

按照以上配置当我门在浏览器输入 http://cn-2.openfrp.top:8888/blog时 会发现静态资源全部无法加载；如图

错误原因

但是当我们将请求失败的连接复制出来 加上8888 端口后就会发现可以正常访问；
错误原因： 请求静态文件时没有到远程服务器端口导致

原因找到 那么配置错误的点就找到了：
proxy_set_header Host $host:$server_port;

此处配置错误导致的

解办法

​修改 proxy_set_header Host $host:$server_port; 为 proxy_set_header Host $http_host;
修改后内容如下

server {
    listen 80;
    server_name test-emlog.com;
    root /www/wwwroot/emlog;
    index index.html index.htm index.php;

    location /blog {
        proxy_set_header Host $http_host;  //只修改这一行
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://127.0.0.1:89/;
    }

    location ~* \.(eot|ttf|woff|svg|otf)$ {
        add_header Access-Control-Allow-Origin *;
    }
}

proxy_set_header 常用配置解释

以此文中的配置举例 一些变量的值

变量	此文中的值	说明
$host	cn-2.openfrp.top	不带http https 前缀
$http_host	cn-2.openfrp.top:8888	不带http https 前缀
$server_port	80	listen 的值
$proxy_host	89	proxy_pass 值