Docker PHP access-control-allow-origin CORS

Question

I want to permanently enable CORS on the default PHP Docker container (https://hub.docker.com/_/php). What is the configuration in docker-compose.yaml or docker-compose.yaml?

This is the request from ReactJS with axios

  class App extends React.Component {
    ... getUsers() {

    axios.get(`http://127.0.0.1:8000/index.php/api`).then(res => {

      this.setState({ users: res.data });

      console.log(state.users);

      // this.setState({ users });

    });

  }

ERROR: Access to XMLHttpRequest at 'http://127.0.0.1:8000/index.php/api' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

docker-compose.yaml

version: '3.3'
services:
  web:
    build:
      context: ./php
      dockerfile: Dockerfile 
    container_name: php74
    depends_on: 
      - db
    volumes:
      - ./php:/var/www/html/
    ports: 
      - 8000:80
  db:
    container_name: mysql8
    image: mysql:latest
    command: --default-authentication-plugin=mysql_native_password
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: test_db
      MYSQL_USER: devuser
      MYSQL_PASSWORD: devpass
    ports:
      - 3306:3306

Dockerfile:

FROM php:7.4-apache
RUN apt-get update && apt-get upgrade -y 
RUN docker-php-ext-install mysqli && docker-php-ext-enable mysqli
EXPOSE 80

Answer 1

You need to add the relevant header in apache configuration in the image. You will also need to enable mod_headers as it is not by default in your image. I used a similar technique as the one described on php docker image documentation (search for "Changing DocumentRoot (or other Apache configuration)" on the page).

Here is a possible Dockerfile. I added as well some good practice to limit the size of layer after running apt.

FROM php:7.4-apache

RUN apt-get update && apt-get upgrade -y \
    && apt-get clean && rm -rf /var/lib/apt/lists/*

RUN docker-php-ext-install mysqli && docker-php-ext-enable mysqli \
    && a2enmod headers
    && sed -ri -e 's/^([ \t]*)(<\/VirtualHost>)/\1\tHeader set Access-Control-Allow-Origin "*"\n\1\2/g' /etc/apache2/sites-available/*.conf

EXPOSE 80

References:

• https://hub.docker.com/_/php/
• https://enable-cors.org/server_apache.html

Answer 2

Thanks to @Zeitounator is working.

This is the version of Dockerfile (nano installed but not needed):

FROM php:7.4-apache
RUN apt-get update && apt-get upgrade -y && apt-get install -y nano
RUN docker-php-ext-install mysqli && docker-php-ext-enable mysqli \
    && a2enmod headers \
    && sed -ri -e 's/^([ \t]*)(<\/VirtualHost>)/\1\tHeader set Access-Control-Allow-Origin "*"\n\1\2/g' /etc/apache2/sites-available/*.conf
ENV TERM xterm
EXPOSE 80

Note: Remeber to delete your images and recreate them https://www.digitalocean.com/community/tutorials/how-to-remove-docker-images-containers-and-volumes

docker system prune -a // be careful with this one it will delete all your images