ReactJS + Apollo 客户端 CORS 问题

Posted 2023-02-27

【中文标题】ReactJS + Apollo 客户端 CORS 问题

【英文标题】：ReactJS + Apollo Client CORS Issue

【发布时间】：2020-03-01 10:14:39

【问题描述】：

在尝试将 GraphQL 集成到 ReactJS 应用程序时遇到了 CORS 问题。

情况：

我正在尝试执行一个简单的 graphql 查询。没有使用数据库。该程序在没有 graphql 实现的情况下运行良好。

浏览器：谷歌浏览器版本 78.0.3904.87

计算机：MacBook Pro，2015 年中

相关依赖：

阿波罗升压：0.4.4 apollo 客户端：2.6.4 cors：2.8.5 快递：4.17.0 graphql：14.5.8 反应：16.8.6 反应阿波罗：3.1.3

这是我在浏览器控制台中遇到的错误：

选项http://localhost:5000/graphql net::ERR_CONNECTION_REFUSED

在此处查看存储库/目录结构：

https://github.com/curtisyungen/hh-graphql

看看我的 server.js 文件：

const express = require("express");
const graphqlHTTP = require('express-graphql');
const schema = require('./src/graphql/schema');
const cors = require('cors');

const PORT = 5000;

const app = express();

app.use(cors());
app.use('/graphql', graphqlHTTP(
    schema, 
    graphiql: true,
));

app.listen(PORT, () => 
    console.log(`Listening on port $PORT. Visit http://localhost:$PORT/ in your browser.`);
);

module.exports.app = app;

以下是我在 App.js 文件中设置 Apollo 客户端的方式：

const cache = new InMemoryCache();
const link = new HttpLink(
  uri: 'http://localhost:5000/graphql'
);

const client = new ApolloClient(
  cache,
  link,
);

这是浏览器中“网络”选项卡的屏幕截图：

Screenshot of Network Tab in Browser

我已经在互联网上搜索了解决方案并尝试了以下方法：

app.use(cors()); 将 fetchOptions: mode: 'no-cors' 添加到 Apollo 客户端 向 Chrome 添加 Access-Control-Allow-Origin 扩展 使用本地 IP 地址代替 'localhost'

我正在关注一个 YouTube 教程，该人通过导入 cors 解决了这个问题。它对他有效，但对我无效……有什么想法吗？

【问题讨论】：

你能分享你的目录结构吗？

@OzanManav 你可以在这里看到回购：github.com/curtisyungen/hh-graphql

【参考方案1】：

这里的问题，你是从你的 reactjs 前端调用一个 API。

并且您的后端未配置为接受来自不同域调用的连接。

您需要通过将相关标头添加到您的服务器配置来在您的服务器上允许它。

或者，在您的 reactjs package.json 添加以下行

"proxy": "http://localhost:5000", # should be the base api url path 

你可以在这里查看我写的关于这个问题的文章 https://minasami.com/2021/06/10/cors-errors-fix-with-reactjs.html