如何防止 nginx 在 Angular 应用程序中更改我的请求 URL答案

【问题标题】：How do I prevent nginx from changing my request URL in Angular app如何防止 nginx 在 Angular 应用程序中更改我的请求 URL
【发布时间】：2022-01-28 22:02:05
【问题描述】：

我正在尝试在 Docker 中构建我的 Angular 网站，这也可以，但是每当网站发出请求时，URL 就会从 http://url_to_api 更改为 http://localhost:8080/url_to_api。

我对 NGINX 和 docker 非常陌生，尝试了许多不同的配置，但都没有成功。

我在浏览器中也收到错误：

Failed to load resource: net::ERR_CONNECTION_REFUSED  /assets/js/env.js

nginx 会阻止它吗？

这是我的基本 nginx.conf

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

这里是 docker 文件


#stage 1
FROM node:12-alpine as build
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build --prod
#stage 2
FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist/webapp /usr/share/nginx/html
EXPOSE 80
#To provide environment variables in angular 
CMD ["/bin/sh",  "-c",  "envsubst < /usr/share/nginx/html/assets/js/env.template.js > /usr/share/nginx/html/assets/js/env.js && exec nginx -g 'daemon off;'"]

【问题讨论】：

您的网站是否只有静态页面？只有这样 nginx 才能正常工作。
不，它也有动态页面。我应该改用什么？
使用我回答的以下 dockerfile 并创建您的图像。从节点提供页面将处理动态页面，就像您在本地机器上运行一样。还要查看网址以了解分步方法
感谢您的回答，但您的配置仅构建了一个不应用于生产的基本服务器，而这正是我所需要的。
很高兴它有帮助，是的，dockerFile 非常基础，可以托管动态页面并解决您面临的问题。如果对您有用，请接受答案。

标签： angular docker nginx

【解决方案1】：

# Create image based on the official Node 10 image from dockerhub
FROM node:10

# Create a directory where our app will be placed
RUN mkdir -p /app

# Change directory so that our commands run inside this new directory
WORKDIR /app

# Copy dependency definitions
COPY package*.json /app/

# Install dependencies
RUN npm install

# Get all the code needed to run the app
COPY . /app/

# Expose the port the app runs in
EXPOSE 4200

# Serve the app
CMD ["npm", "start"]

查看这里的步骤https://www.digitalocean.com/community/tutorials/create-a-mean-app-with-angular-2-and-docker-compose 学习和构建angular2客户端的docker

【讨论】：

【解决方案2】：

现在发现了我的错误。配置文件没问题，但是犯了一个非常愚蠢的错误，我在 docker 文件末尾的脚本交换了 API URL，但我忘记在 URL 的开头指定 HTTP，所以 Nginx 请求了 localhost 上的 URL。

【讨论】：