为什么我得到主机是不可达的，从React代码，而不是从浏览器?

Question

我有Laravel后端API在https://backend.mysite.local，有一个URL返回项目列表在https://backend.mysite.local/api/items

当我在浏览器中输入https://backend.mysite.local/api/items时，我可以在浏览器上看到JSON输出。

但是当我在React代码中使用Axios调用它时，Nginx抛出502 Bad Gateway错误，并带有以下消息:

connect() failed (113: Host is unreachable)上游，客户端:172.20.0.1，服务器:www.mysite.local，请求:"GET/api/items HTTP/1.1"，上游:"http://172.20.0.3:3000/api/items"主持人:"www.mysite.local">

我使用Axios的一个简单调用:

axios.get('https://backend.mysite.local/api/items').then(response => {
console.log(response)
})

我认为问题是我如何配置Docker和Nginx。

这是我的docker-compose.yml:

networks:
mysite:
driver: bridge
services:
nginx:
image: nginx:stable-alpine
container_name: nginx
ports:
- "8088:8088"
- "80:80"  
- "443:443"          

networks:
- mysite                
php:        
build:
context: ./laravel
dockerfile: Dockerfile
container_name: php
ports:
- "9000:9000"
networks:
- mysite
node:
build:
context: ./react
dockerfile: Dockerfile
container_name: react

ports:
- "3000:3000"       
networks:
- mysite

这是我的Nginx配置文件:(它有点长，但主要是从http重定向到https)

server {
listen 443 ssl;
server_name backend.mysite.local;
ssl_certificate /etc/ssl/mysite.local.crt;
ssl_certificate_key /etc/ssl/mysite.local.key;

index index.php index.html;    
error_log /var/log/nginx/error.log;
access_log /var/log/nginx/access.log;
root /var/www/html/public;

location / {
try_files $uri $uri/ /index.php?$query_string;
}

location ~ .php$ {        
try_files $uri = 404;
fastcgi_split_path_info ^(.+.php)(/.+)$;
fastcgi_pass php:9000;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;

set $METHODS  'GET, POST, OPTIONS, HEAD';
set $HEADERS  'Authorization, Origin, X-Requested-With, Content-Type, Accept';


}
server {
listen 80;
server_name backend.mysite.local;
return 301 https://backend.mysite.local$request_uri;
}
server {
listen 80;
server_name nginx;
return 301 https://backend.mysite.local$request_uri;
}

server {
listen 80;
server_name www.mysite.local;
return 301 https://www.mysite.local$request_uri;
}
server {
listen 80;
server_name mysite.local;
return 301 https://www.mysite.local$request_uri;
}
server {
listen 80;
server_name localhost;
return 301 https://www.mysite.local$request_uri;      
}

server {
listen 443 ssl;
server_name mysite.local;
ssl_certificate /etc/ssl/mysite.local.crt;
ssl_certificate_key /etc/ssl/mysite.local.key;
return 301 https://www.mysite.local$request_uri;
}

server {   
listen 443 ssl;
server_name www.mysite.local;     
ssl_certificate /etc/ssl/mysite.local.crt;
ssl_certificate_key /etc/ssl/mysite.local.key;

location / {      
proxy_pass      http://node:3000;

}
}

Answer 1

请使用容器名称从react容器连接到php容器，如:https://php:9000/api/items通过https://backend.mysite.local/api/items连接时，实际上是通过本地系统的主机配置进行连接。或者，您可以在yml中的所有容器配置中添加:network_mode: host，以使本地容器上的所有内容都可用。