我有两个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错误)。
而且,当我在本地计算机上运行这个程序时,一切都运行得很好,但是一旦我尝试在远程主机上运行它,这些错误就出现了。
你有什么建议吗?
1条答案
按热度按时间mznpcxlj1#
React APP由一个容器提供服务,但它是在浏览器中呈现的,我在localhost:3000上看到的图像。
节点API后端从Docker容器暴露到localhost:9000,因此react中使用的URL应为:第一个月
和CORS应配置为允许
localhost:3000