Enable CORS on JSON API Wordpress

Enable CORS on JSON API Wordpress

As a web developer, I have faced many issues while developing applications that require data from different sources. One of such problems is enabling CORS on Wordpress JSON API. When my application was trying to access the JSON API on Wordpress, it was blocked by the browser due to CORS restrictions. CORS stands for Cross-Origin Resource Sharing, and it is a security feature implemented by browsers to prevent malicious websites from accessing resources from other websites.

To enable CORS on Wordpress JSON API, there are multiple ways to do it. One of the most straightforward ways is to use a plugin called "WP REST CORS." This plugin adds the necessary headers to the Wordpress JSON API responses to allow cross-origin requests.

Step 1: Install and Activate WP REST CORS Plugin

The first step is to install and activate the "WP REST CORS" plugin from the Wordpress repository or directly from your Wordpress dashboard. You can do this by navigating to "Plugins" > "Add New" and searching for "WP REST CORS." Once you find it, click on "Install Now," and then "Activate."

Step 2: Test CORS Headers

After activating the plugin, you can test if the CORS headers are being added to the API responses by sending a GET request to the API endpoint using a tool like Postman or cURL. You should see the following headers:

< Access-Control-Allow-Origin: *>
< Access-Control-Allow-Methods: GET, POST, OPTIONS>
< Access-Control-Allow-Headers: Authorization, Content-Type>

The above headers allow any origin to access the API, provide GET, POST, and OPTIONS methods, and accept Authorization and Content-Type headers.

Step 3: Customize CORS Headers

If you need to customize the CORS headers, you can do so by adding the following code to your theme's functions.php file:

<?php
function custom_cors_headers( $headers ) {
    $headers['Access-Control-Allow-Origin'] = 'https://example.com';
    return $headers;
}
add_filter( 'rest_pre_serve_request', 'custom_cors_headers' );

The above code adds a filter to the "rest_pre_serve_request" hook, which allows you to modify the headers before they are sent to the client. In this example, we are adding a custom "Access-Control-Allow-Origin" header that only allows requests from "https://example.com." You can customize the header values according to your needs.

Conclusion

Enabling CORS on Wordpress JSON API can be a bit tricky, but with the WP REST CORS plugin and the code snippet above, you should be able to easily enable CORS and access the API from your applications without any issues.