WP-GraphQL refusing connection from NextJS frontend

[ronleeson]

In the Cors Settings I have the Add Site Address to "Access-Control-Allow-Origin" header checked and the Extend "Access-Control-Allow-Origin” header set to http://localhost:3000 which is my NextJS frontend.

I also added 'Access-Control-Allow-Origin': 'http://localhost:3000/', to my useSWR fetcher headers but wp-graphql is still refusing the connection.

Any thoughts would greatly be appreciated.

[LarsEjaas]

You probably already solved this issue or found another solution instead. But these are the settings that work for me in development AND production:

Go to GraphQL > settings > CORS settings and make sure the following settings are set:

Add Site Address to "Access-Control-Allow-Origin" header should be checked.

Extend "Access-Control-Allow-Origin” header : Enter the domain of your frontend including protocol. Example: https://example.com/

The following settings should also be enabled:

Send site credentials Enable login mutation Enable logout mutation Make sure Samesite cookie mode is set to: LAX

Please note: The Safari browser does not allow you to share cookies across different domains, as these are considered 3rd party and blocked by default. However, if you run WordPress on a subdomain of the domain used for the frontend - cookies will not be blocked.

[dgwyer]

You probably already solved this issue or found another solution instead. But these are the settings that work for me in development AND production:

Go to GraphQL > settings > CORS settings and make sure the following settings are set:

Add Site Address to "Access-Control-Allow-Origin" header should be checked.

Extend "Access-Control-Allow-Origin” header : Enter the domain of your frontend including protocol. Example: https://example.com/

The following settings should also be enabled:

Send site credentials Enable login mutation Enable logout mutation Make sure Samesite cookie mode is set to: LAX

Please note: The Safari browser does not allow you to share cookies across different domains, as these are considered 3rd party and blocked by default. However, if you run WordPress on a subdomain of the domain used for the frontend - cookies will not be blocked.

I don't see any CORS settings in v1.22.1 of the WPGraphQL plugin. Have these been moved/removed do you think?

[MakanaMakesStuff]

@dgwyer You probably already figured it out, but WPGraphql Cors is a separate plugin

[ceeriil]

@MakanaMakesStuff @ronleeson I'm still encoutering this cors issue with next js. WooCommerce v9.1.4 , WP GraphQL V1.3.8, WPGraphQL CORS V2.1

I have this as settings in my apollo config `import { ApolloClient, ApolloLink, InMemoryCache, createHttpLink, } from "@apollo/client"; import fetch from "node-fetch";

/**

• Middleware operation
• If we have a session token in localStorage, add it to the GraphQL request as a Session header. / export const middleware = new ApolloLink((operation, forward) => { /*
  • If session data exist in local storage, set value as session header. */ const session = process.browser ? localStorage.getItem("moutai-session") : null;

if (session) { operation.setContext(() => ({ headers: { "woocommerce-session": Session ${session}, }, })); }

return forward(operation); });

/**

• Afterware operation.

• This catches the incoming session token and stores it in localStorage, for future GraphQL requests. */ export const afterware = new ApolloLink((operation, forward) => { return forward(operation).map((response) => { if (!process.browser) { return response; }

  /**

  • Check for session header and update session in local storage accordingly. */ const context = operation.getContext(); const { response: { headers }, } = context; const session = headers.get("woocommerce-session");

  if (session) { // Remove session data if session destroyed. if ("false" === session) { localStorage.removeItem("app-session");

   // Update session new data if changed.
  

  } else if (localStorage.getItem("app-session") !== session) { localStorage.setItem( "app-session", headers.get("woocommerce-session") ); } }

  return response; }); });

const clientSide = typeof window === "undefined";

// Apollo GraphQL client. const client = new ApolloClient({ ssrMode: clientSide, link: middleware.concat( afterware.concat( createHttpLink({ uri: ${process.env.NEXT_PUBLIC_WORDPRESS_URL}/graphql, fetch, credentials: "include", }) ) ), cache: new InMemoryCache(), });

export default client; ` and yet I still get cors errors /#:1 Access to fetch at 'mysite.hostingersite.com/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Here's my wpgraph corsettings

[webc-charles]

Doing a nextjs app working with wordpress graphql, wordpress is hosted on wpengine. if I'm making simple fetch requests to mysite.com/graphql from the client and including woocommerce session in headers i get this:

localhost/:1 Access to fetch at ... from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field woocommerce-session is not allowed by Access-Control-Allow-Headers in preflight response.

If there is any way to get around it ?