jQuery / Ajax Rest API请求

Question

I'm trying to make an rest api request to realla https://realla.co/api/#/ from localhost, I have an api key and can make the request via PHP but having issues using ajax:

var URL = "https://realla.co/api/v1/listings/search";
var usr = 'api';
var psw = 'hidden';
$.ajax({
  type: "POST",
  dataType: "json",
  contentType: "application/json",
  url: URL,
  crossDomain: true,
  beforeSend: function(xhr) {
    xhr.setRequestHeader("Authorization", "Basic " + btoa(usr + ":" + psw))
  },
  success: function(result) {
    console.log('success');
  },
  error: function(req, status, err) {
    console.log('Something went wrong', status, err);
  }
});

Returns the error

XMLHttpRequest cannot load https://realla.co/api/v1/listings/search. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://dw.dev' is therefore not allowed access. The response had HTTP status code 403.

I tried to fix that problem with https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en but still get the same message.

I've added the following function (running Wordpress):

/*
 * Modify HTTP header
 */
function new_headers($headers) {

    if (!is_admin()) {
        $headers['Access-Control-Allow-Origin'] = '*';   
        $headers['Access-Control-Allow-Methods'] = 'GET, POST, PATCH, PUT, DELETE, OPTIONS';   
        $headers['Access-Control-Allow-Headers'] = 'Origin, Content-Type, X-Auth-Token';   

    }

    return $headers;     
}
add_filter('wp_headers', 'new_headers');

I've tried other APIs (Facebook) and that works but I wonder if I'm missing something with this.

The documentation for Realla is pretty thin, but I wonder if I'm doing something wrong.

Thanks

Answer 1

let's try this

it will work

Add header in requested resource file

 <?php

    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
    header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
 ?>