Can't perform API request from one docker image to another

问题

Im working on an application where I have a react frontend and a java spring backend. I have a simple API call where I want to return a new address. I have verified this works by using a separate container to perform a curl command docker container run --rm -it --net multichain-network byrnedo/alpine-curl http://multichain-api:8080/api/blockchain/address/create. This call returns the the expected result.

Now I have created my docker environments using docker-compose and they are all up and running and can ping one another

version: "3.7"

networks:
  multichain-network:
    driver: bridge
    ipam:
      driver: default
      config:
        - subnet: 172.18.0.0/16
    name: multichain-network

services:
  multichain-api:
    build:
      context: ./blockchain
    networks:
      - multichain-network
    ports:
      - "8080:8080"
    volumes:
      - type: bind
        source: ${PWD}/blockchain/target
        target: /target
    container_name: multichain-api

  frontend:
    build:
      context: ./frontend
    networks:
      - multichain-network
    ports:
      - "3000:3000"
    volumes:
      - type: bind
        source: ${PWD}/frontend
        target: /frontend
    container_name: frontend

I am fairly new to react so I am wondering if it could be something to do within my code, so here is the snippet that makes the call;

getNewAddress = () => {
    console.log("Button clicked");
    axios.get('http://multichain-api:8080/api/blockchain/address/create')
        .then(function (response) {
            console.log("getting new address");
            this.setState({newAddress: response.data});
            console.log(this.state.newAddress);
        })
        .catch(function (error) {
            console.log(error);
        })
}

You will notice in the call that I am calling the container name directly and not the IP address. I am doing this as they are all apart of the one network and when I ping the backend container from the frontend using the container name it works;

docker exec frontend ping multichain-api
PING multichain-api (172.18.0.4): 56 data bytes
64 bytes from 172.18.0.4: seq=0 ttl=64 time=0.295 ms
64 bytes from 172.18.0.4: seq=1 ttl=64 time=0.158 ms
64 bytes from 172.18.0.4: seq=2 ttl=64 time=0.253 ms

When my code tries to make the call this is the error being produced on the dev console;

VM2194:1 GET http://multichain-api:8080/api/blockchain/address/create 0 ()
(anonymous) @ VM2194:1
dispatchXhrRequest @ xhr.js:178
xhrAdapter @ xhr.js:12
dispatchRequest @ dispatchRequest.js:59
Promise.then (async)
request @ Axios.js:51
Axios.(anonymous function) @ Axios.js:61
wrap @ bind.js:9
Container._this.getNewAddress @ Container.js:12
apply @ _apply.js:15
baseInvoke @ _baseInvoke.js:21
apply @ _apply.js:16
(anonymous) @ _overRest.js:32
(anonymous) @ Button.js:74
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:201
executeDispatch @ react-dom.development.js:461
executeDispatchesInOrder @ react-dom.development.js:483
executeDispatchesAndRelease @ react-dom.development.js:581
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:592
forEachAccumulated @ react-dom.development.js:562
runEventsInBatch @ react-dom.development.js:723
runExtractedEventsInBatch @ react-dom.development.js:732
handleTopLevel @ react-dom.development.js:4477
batchedUpdates$1 @ react-dom.development.js:16660
batchedUpdates @ react-dom.development.js:2131
dispatchEvent @ react-dom.development.js:4556
interactiveUpdates$1 @ react-dom.development.js:16715
interactiveUpdates @ react-dom.development.js:2150
dispatchInteractiveEvent @ react-dom.development.js:4533
Container.js:19 Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)

Just to note the browser I am using is Chromium Version 68.0.3440.106. All in all I am not sure if this is a React, docker or browser issue. Looking at the logs for my backend app, when the call is made by the frontend, there is no activity logged, so it is like it is not even being hit.

Any insights into this would be great

Update

I tried this test on Firefox to see if it was a browser issue and the dev console there should an extra piece of information;

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

回答1:

You have a cors issue, not a docker one. It says that the origin domain of the server that make the request ( frontend - react ) and the server's origin domain ( backend - multichain-api ) are different, and you can find the cors system arch here

For solving this issue in backend server you should tell your server to accept requests from different domains.

来源：https://stackoverflow.com/questions/52198743/cant-perform-api-request-from-one-docker-image-to-another

标签

reactjs

Docker

docker-compose

docker-container