Nginx无法访问静态资源,Nginx访问静态资源没有带端口导致静态资源无法访问,内网穿透后无法访问本地静态资源文件 js css
作者:mmseoamin日期:2023-12-13

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

如: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时 会发现静态资源全部无法加载;如图

Nginx无法访问静态资源,Nginx访问静态资源没有带端口导致静态资源无法访问,内网穿透后无法访问本地静态资源文件 js css,在这里插入图片描述,第1张

错误原因

但是当我们将请求失败的连接复制出来 加上8888 端口后就会发现可以正常访问;

错误原因: 请求静态文件时没有到远程服务器端口导致

原因找到 那么配置错误的点就找到了:

proxy_set_header Host h o s t : host: host:server_port;

此处配置错误导致的

解办法

​修改 proxy_set_header Host h o s t : 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 常用配置解释

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

变量此文中的值说明
$hostcn-2.openfrp.top不带http https 前缀
$http_hostcn-2.openfrp.top:8888不带http https 前缀
$server_port80listen 的值
$proxy_host89proxy_pass 值