使用 React 配置 CORS 策略

[codetricity (Craig Oda)]

我想用 React 访问 Discourse API。

我遇到了以下错误：

localhost/:1 对 'https://community.oppkey.host/posts.json' 的 XMLHttpRequest 访问被来自源 'http://localhost:3000' 的 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 响应头。

这是我在 Discourse 管理面板中设置的 CORS 来源。

在 Discourse 服务器上，我的 /var/discourse/containers/app.yml 文件中包含以下内容：

这是我尝试获取 Discourse API 的方式：

export const DiscoursePanel = () => {
    const [ allData, updateData ] = useState([]);
	
	useEffect(() => {
         const apiEndPoint = 'https://community.oppkey.host/posts.json';
         /* const apiEndPoint = 'https://jsonplaceholder.typicode.com/posts'; */
        console.log("正在尝试获取 API: " + apiEndPoint);
		axios
        .get(apiEndPoint)
		.then((res) => {
			const currentData = res.data;
            updateData(currentData);
            console.log("已获取 API 数据");
            console.log(currentData);
		})
		.catch((err) => console.log(err));
    }, []);

如果我使用外部服务器提供的模拟数据，React 代码可以正常工作。

我不太了解 CORS 和 React 的工作原理，所以任何帮助都将不胜感激。

我目前通过自己编写的一个 API 代理服务器来实现功能，该服务器负责将来自我的 Discourse 服务器的 API 调用中继到另一个 REST API 服务器，再由该服务器与 React 连接。虽然这种方法可行，但速度较慢。我希望能够直接从 React 向 Discourse API 端点发送调用。

[gassim (Al-Gassim Sharaf Addin)]

您好 @codetricity

抱歉您没有找到此帖子的回复。我正在使用 React fetch，并且已经完成了您上面提到的类似步骤，但它仍然被“CORS 策略”阻止。

请问您是否找到了此问题的解决方案或解释该解决方案的资源。谢谢！

[codetricity (Craig Oda)]

您好，我不记得我最终做了什么。不过，我刚检查了一下，React 网站仍然可以从 Discourse（在单独的服务器上）获取数据。

由于使用 React 和 Discourse 很常见，我认为其他人可以回答这个问题。抱歉我记不起解决方案了。祝您好运。

[gassim (Al-Gassim Sharaf Addin)]

您好
感谢您的快速回复！

@codetricity

.then((res) => {
			const currentData = res.data;
            updateData(currentData);
            console.log("got api");
            console.log(currentData);
		})

如果您有时间并且可以访问相同的代码，能否请您检查是否添加了其他标头？（不包含敏感信息……）

上面写着“No 'Access-Control-Allow-Origin' header is present”，所以您认为应该添加其他标头吗？

提前感谢！