CORS Policy Error When Accessing Custom API from External Domain

  • Hello Team,

    In WordPress, I created a custom API function with an API key for posts, categories, and authors. This API is working fine on my domain; it has been successfully integrated, and the posts are displayed. However, when I try to integrate it on another domain, it throws an error. For example:

    Access to XMLHttpRequest at 'https://wordpress-website/wp-json/custom-post-api/v1/postslist/' from origin 'https://www.w3schools.com/' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    Please help me resolve this issue.

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

    (@bcworkz)

    WP provides the filter “wp_headers” to allow us to add headers such as Access-Control-Allow-Origin, however the filter is not used for API requests ?? You can send additional headers by adding .htaccess directives, for example:

    <Location "/wp-json/custom-post-api/v1/postslist">
   Header set Access-Control-Allow-Origin "{URL path of permitted request source}"
</Location>
    • This reply was modified 1 week, 4 days ago by bcworkz. Reason: URl path, not full URL
    Thread Starter priyankac

    (@priyankac)

    Thanks for your response. Can you please explain a bit more? I have three APIs, and I want to know if I can pass an individual header for each custom API. When you mention ‘URL of permitted request source,’ does that mean I should add a specific access domain?

    Moderator bcworkz

    (@bcworkz)

    You can specify "*" as the allowed origin, which will allow requests from any source. This does have some security implications. If you have multiple possible origins but do not want to use "*", Mozilla docs say:

    Limiting the possible Access-Control-Allow-Origin values to a set of allowed origins requires code on the server side to check the value of the Origin request header, compare that to a list of allowed origins, and then if the Origin value is in the list, set the Access-Control-Allow-Origin value to the same value as the Origin value.

    Check the accepted answer in this SO topic. The gist is you can only specify one origin per request, but that value can be variable.

    That’s for multiple origins. For multiple API routes: This is managed through the <Location {URL path}> directive. It accepts a ~ arg meaning the following URL path is a regex so you could do a construct like <Location ~ "/wp-json/custom-post-api/v1/(posts|pages|tags)list/"> to use the header for 3 different API routes. Alternately, use <LocationMatch {URL path regex}> in which the path arg is always evaluated as a regex. See the Apache docs for more info.

    Note that in my last reply I initially suggested a location URL. This was slightly inaccurate, “URL path” is more accurate, I’ve corrected my previous reply. From Apache docs:

    For all origin (non-proxy) requests, the URL to be matched is a URL-path of the form /path/. No scheme, hostname, port, or query string may be included.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.