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 ?