为什么我总是收到不允许通配符 * 的 cors 错误，尽管我在服务器上指定了一个来源？

IT技术 reactjs express cors graphql
2021-04-13 06:27:04

我使用 Apollo Server 和 Apollo Client 创建了一个简单的 graphQL 聊天。

它还使用会话 cookie，所以我使用 npm 包初始化服务器，cors如下所示：

app.use(
  cors({
    credentials: true,
    origin: "http://localhost:3000"
  })
);

在客户端，我使用 apollo 客户端并创建一个像这样的 http 链接：

const httpLink = new HttpLink({
  uri: "http://localhost:4000/graphql",
  credentials: "include"
});

因此，我包含凭据，并且服务器具有我的客户端的来源（确实是http://localhost:3000 - create-react-app 默认值）。

当我想运行查询时，我在浏览器控制台中收到此错误：

从源“ http://localhost:3000 ”获取“ http://localhost:4000/graphql ”的访问已被 CORS 策略阻止：响应中“Access-Control-Allow-Origin”标头的值当请求的凭据模式为“包含”时，不得为通配符“*”。

为什么它说响应头有一个通配符 * 集，但在 cors 上我设置了一个特定的来源，所以它不应该是一个通配符对吗？

伙计们，我在这里错过了什么？我当然也重新启动了两台服务器。

当我这样设置客户端时： 

const httpLink = new HttpLink({
  uri: "http://localhost:4000/graphql",
  credentials: "same-origin"
});

我没有从 cors 收到错误消息，但我没有从服务器收到 cookie。Cookie 有效是因为在 graphQL Playground 上一切都按预期进行。

如果想看完整代码：https : //github.com/SelfDevTV/graphql-simple-chat

2个回答

问题已经解决了。

在我index.js来自服务器的文件中。下面几行我将 express 应用程序作为中间件应用到 apollo 服务器实例，如下所示：

server.applyMiddleware({ app });

但这会覆盖我上面设置的 cors 选项。

所以我必须这样称呼它： server.applyMiddleware({ app, cors: false });

现在一切正常:)

是的，cors: false正在关闭 cors，这与凭据或 cookie 无关。这是一种安全保护，在这里解释得更好：medium.com/@baphemot/understanding-cors-18ad6b478e2b至于代理，你把它放在你的 react package.json 中。
2021-05-23 06:27:04
真的要关掉吗？因为这意味着凭据不会传递给客户端？所以cookies不起作用，但他们这样做？我是否从 create-react-app 文件夹或服务器的 package.json 中设置您在 package.json 中提到的这个代理？
2021-05-24 06:27:04
这只是关闭cors。更好的解决方案是在 package.json 中为本地开发设置一个代理，"proxy": "http://localhost:4000/",它告诉通过您的应用程序对代理端口 4000 做出反应以进行开发。对于生产，您需要将服务器和前端捆绑在一起
2021-06-01 06:27:04
你不应该在任何一方明确做任何事情，只需在反应端设置代理，它就会http://localhost:4000像击中http://localhost:3000. 以下是官方文档：facebook.github.io/create-react-app/docs/...
2021-06-16 06:27:04
好的，当我设置这个代理时。我接下来到底要做什么。使用 cors 包启用 cors，如下所示：app.use( cors({ credentials: true, origin: ["http://localhost:3000"] }) );并且还设置cors:true在 apollo 服务器实例上？在客户端我可以设置{credentials: "same-origin" }？这是正确的吗？编辑：不能这样工作。same-origin有效，但没有 cookie。include与通配符相同的 cors 错误。
2021-06-20 06:27:04

您可以改为告诉 Apollo 服务器如何配置 cors。

const corsOptions = {
  origin: "http://localhost:3000",
  credentials: true
}

server.applyMiddleware({
  app,
  cors: corsOptions
})

然后你可以完全消除 express cors 中间件。

当我使用http://localhost:3000或true作为我的出身，它的工作，而不是当我加入*，/或/*在URL，例如结束http://localhost:3000/。我还在我的env.dev文件中添加了这个变量：CLIENT_URL=http://localhost:3000，然后通过 将它加载到服务器索引中origin: process.env.CLIENT_URL，效果很好
2021-05-24 06:27:04
这对我有用。我认为这应该是公认的答案。
2021-06-02 06:27:04
也为我工作。
2021-06-11 06:27:04
其它你可能感兴趣的问题
上一篇Firebase 托管部署错误：任务 5fc ... 失败：6 次尝试后重试用尽 下一篇validateDOMNesting(...): <button> 不能作为 <button> 的后代出现