node.js - 从Angle 8向Express.js后端Docker容器发送HTTP请求时，跨域请求被阻止(原因:CORS请求未成功)

Question

我正在运行2个docker容器frontend和backend。前端在4200端口上运行Angular 8，后端在8080端口上运行Express.js。每当我向后端发送http请求时，就像这样:

getMeetings(): Observable<MeetingList> {
    // The url is http://backend:8080/backend/scheduled-meetings
    return this.http.get<MeetingList>(environment.backend + '/scheduled-meetings';);
}

我在控制台中收到此错误:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://backend:8080/backend/scheduled-meetings. (Reason: CORS request did not succeed).

这是我的 docker-compose.yml文件:

version: '3'
services:
  backend:
    container_name: backend
    build: ./backend
    ports:
      - '8080:8080'
    command: npm run start
    volumes: 
      # Mount the host path, ., to the path "/usr/src/app" in the docker container.
      # Do this so that nodemon can watch for file changes and restart within the container.
      # Should move to a src folder.
      - ./backend:/usr/src/app
  frontend:
    container_name: frontend
    build: ./frontend
    ports:
      - '4200:4200' # Port mapping
    volumes:
      - './frontend:/usr/src/app'

这是 Angular 容器的 Dockerfile:

FROM node:12

# Create working directory and make it the working directory
WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install -g @angular/cli @angular-devkit/build-angular && npm install

# Bundle the app source
COPY . /usr/src/app

EXPOSE 4200

CMD ["npm", "start"]

这是Express容器的 Dockerfile:

FROM node:12

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 8080

CMD [ "npm", "start"] 

我已经在Express应用程序中尝试了以下方法:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

我也通过在 "proxyConfig": "src/proxy.conf.json"中添加 angular.json来在Angular项目中使用代理，如下所示:

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
        "browserTarget": "frontend:build",
        "proxyConfig": "src/proxy.conf.json",
        "optimization": false
    },
...

并在 package.json中使用此命令为项目提供服务:

"scripts": {
    "start": "ng serve --host=0.0.0.0 --port 4200 --proxy-config src/proxy.conf.json",
    ...
}

这是 proxy.conf.json文件:

{
    "/backend/*": {
        "target": "http://backend:8080",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug",
        "pathRewrite": {
            "^/backend": ""
        }
    }
}

为什么会发生此错误？我以为在Node.js中添加 Access-Control-Allow-Origin header 可以解决此问题，但没有解决。现在我已经尝试使用Angular中的代理进行其他几种配置，但仍然收到此错误。

Answer 1

如果您只是想使其工作(我很确定是这种情况)，则允许任何cors请求对您都可以。只是安装cors并添加

app.use(require('cors')());

将解决您的问题。有关更多配置和信息，请参阅本指南 https://expressjs.com/en/resources/middleware/cors.html
Angular代理用于开发，而不是在生产环境中运行。如果您不知道解决了什么确切的问题，请不要使用它