尽管我在服务器上指定了原点，为什么总是出现不允许通配符*的cors错误? [英] Why do I always get a cors error that wildcard * is not allowed, although I specified a origin on the server?

问题描述

我使用Apollo Server和Apollo Client创建了一个简单的graphQL Chat.

它也使用会话cookie，因此我使用npm包 cors 初始化服务器，如下所示:

  app.use(cors({凭据:是的，来源:"http://localhost:3000"})); 

在客户端，我使用apollo客户端并创建一个如下所示的http链接:

  const httpLink = new HttpLink({uri:"http://localhost:4000/graphql"，凭据:包括"}); 

因此，我包括凭据，并且服务器具有我的客户端的来源(确实是 http://localhost:3000 -create-react-app默认).

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

可从来源" http://localhost:4000/graphql "处的内容"http://localhost:3000" rel ="noreferrer"> http://localhost:3000 "已被CORS策略阻止:当请求的凭据模式为包括"时，响应不得为通配符"*".

为什么说响应标头设置了通配符*，但是在cors上我设置了特定的原点，所以它不应该是通配符吗?

我在这里想念什么?我当然也重新启动了这两个服务器.

当我这样设置客户端时:

  const httpLink = new HttpLink({uri:"http://localhost:4000/graphql"，凭据:同源"}); 

我没有从cors收到错误消息，但是没有从服务器收到cookie.Cookies之所以有效，是因为在graphQL Playground上一切正常.

如果您想查看完整的代码: https://github.com/SelfDevTV/graphql-简单聊天

解决方案

问题已解决.

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

server.applyMiddleware({app});

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

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

现在一切正常:)

I created a simple graphQL Chat with Apollo Server and Apollo Client.

It also uses session cookies so I initialized the server with the npm package cors like this:

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

On the client side I use apollo client and create a http link like this:

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

So I include credentials and the server has the origin of my client (which is indeed http://localhost:3000 - create-react-app default).

When I want to run a query I get this error in my browser console:

Access to fetch at 'http://localhost:4000/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

Why does it say that the response header has a wildcard * set, but on cors I set a specific origin, so it should not be a wildcard right?

What am I missing here guys? I also restarted both servers of course.

When I set the client like this:

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

I don't get an error message from cors, but I don't receive a cookie from the server. Cookies work because on graphQL Playground everything works as expected.

If you want to see the full code: https://github.com/SelfDevTV/graphql-simple-chat

解决方案

The problem is solved.

In my index.js file from the server. A few lines below I apply the express app as a middleware to the apollo server instance like so:

server.applyMiddleware({ app });

But this overrides cors options I set above.

So I have to call it like this: server.applyMiddleware({ app, cors: false });

Now everything works perfectly :)

这篇关于尽管我在服务器上指定了原点，为什么总是出现不允许通配符*的cors错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！