CORS блокирует вызов API из проекта Dockerized React

Question

У меня возникли проблемы с запуском отдельного приложения React, которое выполняет привязанные действия, и делает Restful-вызовы в Dockerized микросервис Node.js.Проблемы, с которыми я сталкиваюсь, состоят в том, что запросы блокируются политикой CORS со следующей ошибкой:

Access to XMLHttpRequest at 'http://localhost:3001/api/restaurants/' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains the invalid value '"http://172.28.1.1:3000"'.

Существует переменная среды URL, которую я использую для установки принятыхзаголовок cors при запуске контейнера.Я использовал ту же технику, чтобы делать запросы между двумя безголовыми приложениями.Есть ли что-то в React, что это не сработает?

Я попытался установить IP-адреса в docker-compose для передачи в качестве переменной env CORSHEADER.Я добавил соответствующий код ниже.

docker-compose.yml

version: '3'

services:
  web-ui-service:
    container_name: web-ui-service
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/usr/src/app'
      - '/usr/src/app/node_modules'
    ports:
      - '3000:3000'
    depends_on:
      - restaurant-data-service
    networks:
      vegitable_net:
        ipv4_address: 172.29.1.1

  restaurant-data-service:
    image: timhaydenhawkins/restaurant-data-service
    environment:
      CORSHEADER: "http://172.29.1.1:3000"
    ports:
      - 3001:3001
    networks:
      vegitable_net:
        ipv4_address: 172.29.1.2

networks:
  vegitable_net:
    ipam:
      driver: default
      config:
        - subnet: 172.29.0.0/16

Настройка заголовка Cors в ресторане-data-service

module.exports = function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', process.env.CORSHEADER);
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, 
DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested- 
With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
}

Этот метод имеетотлично работал в приложениях без контейнеров в контейнерах, но имел серьезные проблемы с работой в React.Есть идеи?

Answer 1

Приложение вашего узла должно поддерживать CORS. Если вы используете Express, вам нужно добавить следующие строки в файл app.js

const cors = require('cors'); app.use(cors()); app.options('*', cors());

Answer 2

Заголовок 'Access-Control-Allow-Origin' содержит недопустимое значение '"http://172.28.1.1:3000"'

1. Похоже, что кавычки обрабатываются какчасть значения переменной среды:

environment: - CORSHEADER="http://172.28.1.1:3000" - PROXY=true

Должно быть:

environment: CORSHEADER: "http://172.28.1.1:3000" PROXY: true

(хотя вы можете избежать еготоже: docker-compose - как экранировать переменные окружения )

Похоже, что docker-compose.yml, которым вы поделились, неверно сформирован:

environment: - NODE_ENV=development depends_on: - restaurant-data-service

Отступ в этом бите не соответствует остальным клавишам web-ui-service.Он не анализируется правильно, но, возможно, это был несчастный случай?