我的博客

Nginx 反向代理返回结果为空的问题

admin2019-12-23 16:02 3348人已围观

简介最近在开发过程中遇到了这么一个问题：现在有一个 Web 项目，前端是使用 Vue.js 开发的，整个前端需要部署到 K8S 上，后端和前端分开，同样也需要部署

最近在开发过程中遇到了这么一个问题：

现在有一个 Web 项目，前端是使用 Vue.js 开发的，整个前端需要部署到 K8S 上，后端和前端分开，同样也需要部署到 K8S 上，因此二者需要打包为 Docker 镜像。

对前端来说，打包 Docker 就遇到了一个问题：跨域访问问题。

因此一个普遍的解决方案就是使用 Nginx 做反向代理。

一般来说，我们需要在打包时配置一下 nginx.conf 文件，然后在 Dockerfile 里面指定即可。

首先看下 Dockerfile：

# build stage

FROM node:lts-alpine as build-stage

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

# production stage

FROM nginx:lts-alpine as production-stage

COPY --from=build-stage /app/dist /usr/share/nginx/html

COPY nginx.conf /etc/nginx/conf.d/

RUN rm /etc/nginx/conf.d/default.conf

&& mv /etc/nginx/conf.d/nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

一般来说，对于常规的 Vue.js 前端项目，Dockerfile 就这么写就行了。

简单介绍一下：

第一步，使用 Node.js 镜像，在 Node.js 环境下对项目进行编译，默认会输出到 dist 文件夹下。
第二步，使用新的 Nginx 镜像，将编译得到的前端文件拷贝到 nginx 默认 serve 的目录，然后把自定义的 nginx.conf 文件替换为 Nginx 默认的 conf 文件，运行即可。

这里比较关键的就是 nginx.conf 文件了，为了解决跨域问题，我们一般会将后端的接口进行反向代理。

一般来说，后端的 API 接口都是以 api 为开头的，所以我们需要代理 api 开头的接口地址，nginx.conf 内容一般可以这么写：