Attempting to retrieve a route from candriam-app.nanosite.tech to candriam.nanosite.tech has proven challenging. Despite various attempts to allow headers, I continue to encounter this CORS error:
Access to fetch at 'https://xxxA/wp-json/nf-submissions/v1/form/1' from origin 'https://xxxB' has been blocked by CORS policy: Request header field nf-rest-key is not allowed by Access-Control-Allow-Headers in preflight response.
The goal is to create a headless Wordpress site for xxxA. Requests to the WP Rest API work smoothly from candriam-app.nanosite.tech, but issues arise when interacting with an endpoint created by the extension found here: https://github.com/haet/ninja-forms-submissions-rest-endpoint
Following the documentation, the request code looks like this:
export async function getApiContactForm(route, params = { method: 'get' }) {
const data = await fetch(route, {
method: params.method,
headers: {
'Content-Type': 'application/json',
'NF-REST-Key': 'xxxxxxxxxxx',
},
})
const body = data.json()
return body
}
The NF-Rest-Key matches the one provided by the module.
Various server-side methods have been attempted:
In functions.php, the following code was tested :
header( 'Access-Control-Allow-Origin: * ' );
header( 'Access-Control-Allow-Methods: GET' );
header( 'Access-Control-Allow-Credentials: true' );
header( 'Access-Control-Allow-Headers: nf-rest-key' );
In .htaccess file of xxxxxA, this approach was tried :
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
Additionally, these combinations were also experimented with :
Header set Access-Control-Allow-Origin *
Header set AMP-Access-Control-Allow-Source-Origin *
Despite these efforts, the error persists.
Could it be due to a bug in the plugin? Is there a specific permission needed for this plugin or header (nf-rest-key) on the server side?
When inspecting the server headers (such as using a service like this: ), should authorization for the website where my app is hosted be visible?