CORS error using WP REST API

  • jeppex

    (@jeppex)


    2 years, 11 months ago

    Hey there

    I have set up a wordpress installation at a subdomain of my site. On the main domain, I am running a React build that fetches the content from the headless WordPress. It all appears to work.

    However, on every load of the page I get a CORS error:

    “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”

    I mostly get this on just a single endpoint. It is not the same endpoint that throws an error, but there appears to be at least one CORS error every time.

    Under settings I have set wordpress address and site address to the subdomain. And I am running https.

    I have also tried setting the site address to the main domain which gave the same CORS errors. (And in this process I accidentally made a mistake, so I couldn’t acces the dashboard, so now both addresses are hardcoded in the function.php as the subdomain. If the site address is the main domain, I cannot access the controlpanel..)

    Any idea of what the issue could be? Any help appreciated 🙂

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    2 years, 11 months ago

    WP by default does not respond with any Access-Control-Allow-Origin header. If your app requires such a header, it can be added through the “wp_headers” filter.

    To limit the header to API requests, your callback could check if constant REST_REQUEST is defined and its value is true.

    The ideal value for the header is discussed in this Mozilla doc page. The least restrictive would be Access-Control-Allow-Origin: *. (allow any origin)

    Thread Starter jeppex

    (@jeppex)

    2 years, 11 months ago

    Thank you for your response!
    When I add the Access-Control-Allow-Origin: * in the .htaccess, all endpoints seem to fail.

    However, I noticed that in the console appears as a CORS error, in the network tab in dev tools is a 508 loop detected error. Still, only on one endpoint each time.

    Could this be something else than a issue with the headers?

    Moderator bcworkz

    (@bcworkz)

    2 years, 11 months ago

    A 508 status suggests a faulty .htaccess directive somewhere. I added the following to my .htaccess as a test, it worked as expected without error:

    <IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
</IfModule>
    Thread Starter jeppex

    (@jeppex)

    2 years, 11 months ago

    Thanks again!

    But it appeared simply to be faulty code. I actually had a loop in my get requests 🤦‍♂️

    • This reply was modified 2 years, 11 months ago by jeppex.
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘CORS error using WP REST API’ is closed to new replies.