{"id":22971,"date":"2020-11-17T12:00:05","date_gmt":"2020-11-17T17:00:05","guid":{"rendered":"https:\/\/webdevstudios.com\/?p=22971"},"modified":"2024-04-15T11:56:51","modified_gmt":"2024-04-15T15:56:51","slug":"resolve-cors-errors","status":"publish","type":"post","link":"https:\/\/webdevstudios.com\/2020\/11\/17\/resolve-cors-errors\/","title":{"rendered":"Resolve CORS Errors with WordPress REST API"},"content":{"rendered":"

Cross-Origin Resource Sharing<\/a> (CORS) is a relatively new problem in JavaScript development. Maybe I’m showing my age here, but I can distinctly remember when there were no concerns with loading JavaScript from all over the internet into your blog. It was new! It was fun! But as more and more of us got online, and JavaScript\u00a0webpages<\/em> turned into JavaScript\u00a0applications<\/em>, it became a huge security risk. Thus, we have our modern world where a JavaScript file can only be loaded outside of its domain if it contains the correct Access-Control-Allow-Origin<\/code>\u00a0headers.<\/p>\n

So, what do you do when you’re happily making a block (as part of your agency’s Gutenberg-first initiative<\/a>, of course), and the API you are trying to access doesn’t have the correct headers? Let me show you a quick way to resolve a CORS error with the WordPress REST API. In particular, we’re going to create a custom REST endpoint and proxy our request through the WordPress API.<\/p>\n

I ran into this problem when revisiting my old custom oEmbed provider<\/a>. I wanted to accomplish the same thing, but in JavaScript:<\/p>\n

\"Screenshot<\/p>\n

However, when trying to load the API from my local machine, I got these errors:<\/p>\n

\"Access<\/p>\n

In short, because the remote server backend.deviantart.com<\/code> is not set up to allow an arbitrary web page to load its JavaScript, I could not call the API directly from my block using fetch<\/code>.\u00a0To get around this, we’ll be using the PHP backend and wp_remote_get<\/code>.<\/p>\n

New REST Endpoint<\/h3>\n

First, we need to set up our custom endpoint. This will allow us to call the WordPress backend from our block:<\/p>\n