The WP Graphql Cors plugin is working very well for me, however when used with the Cloudinary plugin I can only get access to local image URL's through the WPGraphQL API endpoint. Is this a bug or a setting I need to change inside the plugin?
This is how it can be replicated:
-
Install the WPGrapQL WordPress plugin, the WP Graphql Cors plugin and the Cloudinary WordPress plugin.
-
Make sure the default "Sample Page" is published and add a featured image to the page hosted on Cloudinary.
-
Right-click the featured image and copy the image URL to make sure it points to a Cloudinary URL.
-
Go to the: GraphiQL IDE menu point inside WP admin.
-
Inside the IDE add the following graphQL query:
query GET_PAGE(
$uri: ID!
) {
page: page(id: $uri, idType: URI) {
featuredImage {
node {
sourceUrl
}
}
}
}
In the QUERY VARIABLES field just below the field for queries, add the following JSON object:
{"uri": "sample-page"}
Click the Execute Query ▶️ button inside the GraphiQL IDE.
Expected behavior
I expect the image slug/URL to point to Cloudinary. However, Instead I get a slug/URL pointing to the WordPress domain.
Further explanation
If I disable the WP Graphql Cors plugin all URLs are pointing to Cloudinary as expected when executing queries to the WPGraphQL endpoint or inside the GraphiQL IDE.
I have tried adding https://res.cloudinary.com/ in the Extend "Access-Control-Allow-Origin” headersettings field onCORS Settings` (I have my frontend domain including protocol on the first line and the Cloudinary domain on the next line) with no luck.
Testing environment
I have tested this locally on localhost but also see the same issue in production.
"home": "http://localhost:8080",
"wordpress": "6.3",
"php": "8.0.29",
"theme": {
"name": "Twenty Twenty-Three",
"version": "1.2",
},
"plugins": [{
"Name": "Cloudinary",
"PluginURI": "https://cloudinary.com/documentation/wordpress_integration",
"Version": "3.1.3",
},
{
"Name": "WPGraphQL CORS",
"Version": "2.1",
},
{
"Name": "WPGraphQL",
"Version": "1.14.10",
}]
The WP Graphql Cors plugin is working very well for me, however when used with the Cloudinary plugin I can only get access to local image URL's through the WPGraphQL API endpoint. Is this a bug or a setting I need to change inside the plugin?
This is how it can be replicated:
Install the WPGrapQL WordPress plugin, the WP Graphql Cors plugin and the Cloudinary WordPress plugin.
Make sure the default "Sample Page" is published and add a featured image to the page hosted on Cloudinary.
Right-click the featured image and copy the image URL to make sure it points to a Cloudinary URL.
Go to the: GraphiQL IDE menu point inside WP admin.
Inside the IDE add the following graphQL query:
In the QUERY VARIABLES field just below the field for queries, add the following JSON object:
▶️ button inside the GraphiQL IDE.
{"uri": "sample-page"}Click the Execute Query
Expected behavior
I expect the image slug/URL to point to Cloudinary. However, Instead I get a slug/URL pointing to the WordPress domain.
Further explanation
If I disable the
WP Graphql Corsplugin all URLs are pointing to Cloudinary as expected when executing queries to the WPGraphQL endpoint or inside the GraphiQL IDE.I have tried adding
https://res.cloudinary.com/in the Extend "Access-Control-Allow-Origin” headersettings field onCORS Settings` (I have my frontend domain including protocol on the first line and the Cloudinary domain on the next line) with no luck.Testing environment
I have tested this locally on localhost but also see the same issue in production.