ReactJS+；阿波罗客户CORS问题

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

情况：

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

浏览器：谷歌Chrome 78.0.3904.87版

计算机：MacBook Pro，2015年年中

相关依赖项：

• 阿波罗助推：0.4.4
• 阿波罗客户机：2.6.4
• cors:2.8.5
• 快车：4.17.0
• 图ql:14.5.8
• 反应：16.8.6
• 阿波罗：3.1.3

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

选项网络：：错误连接被拒绝

请参见此处的存储库/目录结构：

看一下我的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;

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

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

以下是我如何在App.js文件中设置Apollo客户端：

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;

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

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

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

我在互联网上搜寻解决方案，并尝试了以下方法：

• 应用程序使用（cors（））
• 正在向Apollo客户端添加fetchOptions:{mode:'no cors'}
• 向Chrome添加访问控制允许源代码扩展
• 使用本地IP地址代替“本地主机”

---

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

这里的问题是，您正在从reactjs前端调用API

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

您需要通过将相关的头添加到服务器配置中，在服务器上允许这样做

或者，在reactjs

package.json

中添加以下行

“代理”：http://localhost:5000“，#应为基本api url路径

你可以看看我在这里写的一篇关于这个问题的文章

---

你能分享你的目录结构吗？@OzanManav你可以在这里看到repo：