Frontend cannot send a json to backend: Cross-Origin Request Blocked

  containers, docker, json, request

I have two containers, one to frontend with VueJS and other to backend with python/flask. With docker compose, I’ve built communicate between 2 containers. The docker network is ok, because in frontend container I can ping backend container. But when frontend app send a json to backend, occurs this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading
the remote resource at http://backend1:5000/test/.
(Reason: CORS request did not succeed).

The Docker-Compose file:

version: "3"

services:
  backend1-compose:
    build:
      context: .
      dockerfile: ./backend1.dockerfile
    container_name: backend1
    ports:
      - "5000:5000"
    volumes:
      - ../backend/:/backend/
    networks:
      - network1-compose

  frontend1-compose:
    build:
      context: .
      dockerfile: ./frontend1.dockerfile
    container_name: frontend1
    ports:
      - "8080:8080"
    volumes:
      - ../frontend/:/app/
    command: npm run serve
    depends_on:
      - backend1-compose
    networks:
      - network1-compose
  
networks:
  network1-compose:
    driver: bridge

In frontend, I’ve a axios plugin configured:

import Vue from 'vue'
import axios from 'axios'

Vue.use({
    install(Vue) {
        Vue.prototype.$http = axios.create({
            baseURL: 'http://backend1:5000/',
            headers: {
                'Content-Type': 'application/json',
            },
        })
    }
})

In backend:

app = Flask(__name__, static_url_path="/static")
app.config['CORS_HEADERS'] = 'Content-Type'
app.config['CORS_RESOURCES'] = {r"/test/": {"origins": "*"}}

cors = CORS(app)

@app.route('/test/', methods=['POST', 'OPTIONS'])
@cross_origin(origin='*', headers=['Content-Type','Origin',  'X-Auth-Token'])
def reply():
    ...

Any idea?

Source: Docker Questions

LEAVE A COMMENT