时间戳

首页 > 解决方案 > wget 工作，但无法从 React 应用程序请求

reactjs - wget 工作，但无法从 React 应用程序请求

问题描述

我有两个链接的 Docker 容器api和frontend. frontend是容器内的 ReactJS 应用程序nginx。这是 Dockerfile：

FROM nginx:alpine

COPY ./build /usr/share/nginx/html/

和运行命令：

docker run --name frontend --link api:api -p 80:80 frontend_img

当我sh进去frontend跑步时：

$ wget http://api:8080/api/users

工作正常，我能够获取用户。但是，当我的应用程序尝试获取数据时，ERR_NAME_NOT_RESOLVEDChrome 控制台中出现错误。

这是我的 JS 代码：

fetchUsers() {
    return axios.get('http://api:8080/api/users')
      .then(response => response.data)
      .then(users => this.setState({ users }));
}

我错过了什么？我是否需要在 NGINX 中配置某些东西才能从api或其他东西中获取数据？

标签： reactjshttpdockernginxwget

解决方案

解决了！感谢这个接受的答案docker nginx ERR_NAME_NOT_RESOLVED

当使用反向代理连接到容器时，应用程序使用的所有 URL 都需要指向该反向代理而不是应用程序。通常，您通过在 URL 中提供不带主机名的路径来执行此操作。

首先，我创建了一个default.confnginx 文件来添加一条location语句以将调用重定向到我的 api 容器：

location /api/ {
  proxy_pass http://api:8080;
}

然后，在我的 web 应用程序中，我更改了我的 JS 代码，所以我请求反对/api/users，没有主机名：

fetchUsers() {
    return axios.get('/api/users')
      .then(response => response.data)
      .then(users => this.setState({ users }));
}

最后，在 Dockerfile 中，我将默认default.conf的 nginx 文件替换为已编辑的文件：

FROM nginx:alpine
COPY default.conf /etc/nginx/conf.d
COPY ./build /usr/share/nginx/html/

就这样！

推荐阅读