docker React应用程序无法通过获取或axios访问API容器

but5z9lq  于 2023-01-01  发布在  Docker
关注(0)|答案(1)|浏览(195)

我有两个Docker容器,一个运行React App,另一个运行Node Express API。下面是我的docer-composite. yml文件:

version: '3.8'

services:
  node-api:
    build: ./node-api
    ports:
      - 9000:9000
    restart: 
      on-failure

  react-app:
    build: ./react-app
    ports:
      - 3000:3000
    depends_on:
      - node-api

当我尝试调用带有提取功能的API时,我收到**"CORS请求未成功"**错误。CORS在后端启用:

const express = require("express");
const cors = require("cors");

const app = express();
app.use(cors());

下面是React App内部调用API的函数:

const handleContentClick = async () => {
   let url = `http://node-api:9000/api/content`;
   const response = await fetch(url);
   const data = await response.json();
}

我尝试将CORS原点显式设置为react-app容器,但没有任何帮助。
有一件事让我很困惑,当我进入react-app容器并尝试使用curl或node访问API时,我会从API获得响应。为什么可以通过node和curl从同一个容器访问它,而不能从React App访问它?
我还尝试用axios替换fetch,但仍然得到一个错误(这次是ERR_NETWORK错误)。
而且,当我在本地计算机上运行这个程序时,一切都运行得很好,但是一旦我尝试在远程主机上运行它,这些错误就出现了。
你有什么建议吗?

mznpcxlj

mznpcxlj1#

React APP由一个容器提供服务,但它是在浏览器中呈现的,我在localhost:3000上看到的图像。
节点API后端从Docker容器暴露到localhost:9000,因此react中使用的URL应为:第一个月
和CORS应配置为允许localhost:3000

相关问题