title: CORS blocking API call from Dockerized React project
body: <p>I'm having issues running a detached dockerized React app that makes Restful calls to a dockerized Node.js microservice. The issues that I'm having is that the requests are blocked by the CORS policy with the following error:</p>
  
  <p><code>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"'.</code></p>
  
  <p>There is a url environment variable the I use to set the accepted cors header when the container is run up. I have used the same technique to make requests between 2 headless apps. Is there something about React that means this will not work? </p>
  
  <p>I have tried setting the IP addresses in the docker-compose in order to pass in as the CORSHEADER env variable. I've added the relevant code below.</p>
  
  <p>docker-compose.yml    </p>
  
  <pre><code>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
  </code></pre>
  
  <p>Cors header setting in restaurant-data-service</p>
  
  <pre><code>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();
  }
  </code></pre>
  
  <p>This techniques has worked fine in headless apps in containers but having real issues with it working for React. Any ideas?</p>