刚开始能启动前端项目,接口也能正常返回200的code.

但是接口老是报错

We‘re sorry but xxxx doesn‘t work properly without JavaScript enabled

在这里插入图片描述

网上搜了一下,结合自己分析。就是web项目Nginx配置有问题。
大概的方向是没有配置vue项目中的反向代理地址

原先的Nginx的default.conf文件内容是这样的

server {
    listen       80;
    server_name  xxx.xxx.xxx.xx; # .........docker..................ip

    location / {
        root   /usr/share/nginx/html/;
        index  index.html index.htm;
        error_page 405 =200 /index.html;
        try_files $uri $uri/ @router;
    }

    location @router {
        rewrite ^.*$ /index.html last;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

由于我前端接口地址前缀是/dev-api开头,且没有配置proxy_pass地址,所以才会报上面的错误。修改成下面的配置解决了问题,就是添加了 location /dev-api后面的配置。

server {
	# listen后面跟上监听的端口号
    listen       80;
    # 配置服务器的ip
    server_name  xxx.xxx.xxx.xx; # .........docker..................ip

    location / {
    	# root是根路径的意思,nginx默认的文件路径是/urs/share/nginx/html/
        root   /usr/share/nginx/html/;
        # 当前文件夹的文件格式
        index  index.html index.htm;
        error_page 405 =200 /index.html;
        # 是vue这样项目的加上这个,避免刷新旧地址错误
        try_files $uri $uri/ @router;
    }

  	# 跟上面路由是一起的 (vue项目必须)
    location @router {
        rewrite ^.*$ /index.html last;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }

	# 设置接口代理,适用vue项目中配置反向代理的情况,不需要不开
    location /dev-api {
        add_header Access-Control-Allow-Methods *;
        add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Credentials true;
        # 替换为自己的接口地址 http://xxxx.xx.xx.x:xxxx
        proxy_pass http://xxx.xxx.xxx.xx:9090/workxxx;
    }
}

这里面满足了基本的nginx配置(包括普通静态页面、vue需要打包的项目、子路径配置、接口代理避免跨域)

参考

Nginx 前端项目配置 包含二级目录和接口代理
https://www.cnblogs.com/YOUNGZZ/p/13456346.html

使用 Docker 构建前端应用
https://zhuanlan.zhihu.com/p/39241059

docker–部署vue项目
https://www.cnblogs.com/zouzou-busy/p/11838524.html

Logo

前往低代码交流专区

更多推荐