Enable CORS on JSON API Wordpress

Question

I have this wordpress site with a plugin called JSON API. This plugin provides a JSON format for the content that is in the wordpress. I was able to enable CORS on the wordpress by adding header("Access-Control-Allow-Origin: *"); on the php header. But when I tried the url that the JSON API plugin provides the CORS does not work anymore.

This is the wordpress site were I'm doing the tests... I used the test cors website to check if it was working and it is... http://kiwa-app.loading.net/

But when I try with the url that the JSON api provides me, is not working anymore. I'm still have the error No 'Access-Control-Allow-Origin' http://kiwa-app.loading.net/?json=info

I will apreciate some help thanks!!!

Answer 1

I've used a few different WordPress API's - but for those of you using the 'official' WP-API, I had much trouble with this CORS --- and what I found was that between the .htaccess approach and a few others I stumbled upon... adding this to your theme functions.php worked best.

function add_cors_http_header(){
    header("Access-Control-Allow-Origin: *");
}
add_action('init','add_cors_http_header');

Be sure not to use any combinations of these ( .htaccess, header.php, api.php, functions.php ) as it will be angry at you.

Answer 2

In wordpress goto plugins > JSON API > Edit

From the right hand file selection select

json-api/singletons/api.php

You will need to add the following line

header("Access-Control-Allow-Origin: *");

Your code should look similar to this once done. Adding this line anywhere else might not work as expected.

<?php
header("Access-Control-Allow-Origin: *"); 
class JSON_API {

  function __construct() {
    $this->query = new JSON_API_Query();
    $this->introspector = new JSON_API_Introspector();
    $this->response = new JSON_API_Response();
    add_action('template_redirect', array(&$this, 'template_redirect'));
    add_action('admin_menu', array(&$this, 'admin_menu'));
    add_action('update_option_json_api_base', array(&$this, 'flush_rewrite_rules'));
    add_action('pre_update_option_json_api_controllers', array(&$this, 'update_controllers'));
  }

  function template_redirect() {

Answer 3

Ok I finally figured out an easy way...

You just have to add:

     <? header("Access-Control-Allow-Origin: *"); ?>

On the file api.php, this file is located in wp-content/plugins/json-api/singletons/api.php

I hope it helps more people with the same problem!

Answer 4

Before the response is sent to the browser, we can run two action hooks and insert a new header():

do_action("json_api", $controller, $method);
do_action("json_api-{$controller}-$method");

The first one runs on every method, and the second one is to target specific methods. Here's an implementation of the first one, with a commented way to find the second:

add_action( 'json_api', function( $controller, $method )
{
    # DEBUG
    // wp_die( "To target only this method use <pre><code>add_action('$controller-$method', function(){ /*YOUR-STUFF*/ });</code></pre>" );

    header( "Access-Control-Allow-Origin: *" );
}, 10, 2 );

Answer 5

For anyone who is having this issue with multiple origins

In your server hosting your wordpress site, navigate to ../wp-content/plugins/json-rest-api and from here open the plugin.php file.

In this function

function json_send_cors_headers( $value ) {..}

Change the header

header( 'Access-Control-Allow-Origin: ' . esc_url_raw( $origin ) );

To

header( 'Access-Control-Allow-Origin: *' );

Hope this helps anyone who was incurring the same issues as I.