DaviesTobi alex DaviesTobi alex - 1 year ago 59
Javascript Question

Can not retrieve data between domain and sub domain

I have an Ajax request on a domian xyz.com and I am performing an
Ajax request from xyz.com to pull data from abc.xyz.com

var request = $.ajax({
type: "POST",
url: "https://abc.mno.com/vending/mainvending.php",
data: {vlu:"1"},
dataType: 'json',
timeout: 10000,
crossDomain: true,
async: true,
cache: false,
headers: { "cache-control": "no-cache" },
error: function( jqXHR, textStatus, errorThrown )
alert("error : " + errorThrown + " text :"+textStatus + " j :" +jqXHR.status);
// alert(jqXHR.responseText);
success: Succeeded,
beforeSend: function( xhr ) { }

but I keep getting this error which is consoled out in the browser (Chrome)

XMLHttpRequest cannot load https://abc.xyz.com/vending/mainvending.php. Request header field cache-control is not allowed by Access-Control-Allow-Headers in preflight response.

In the mainvending.php the codes are as follows

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');
require_once 'vendors.php';

/** Other codes follow **/
/** Other codes follow **/

what am I not doing or what am I doing wrong? The domain name is xyz and the domain I am retrieving data from is of a sub domain could that be the issue and how do I go around this.

Answer Source

Your error message says that the server isn't allowing you to send a cache-control header.

You are doing that here:

headers: { "cache-control": "no-cache" },

… cache-control is a response header, so it makes no sense to include it in a request.

Remove that line.

(Alternatively, you could add it to the Access-Control-Allow-Headers header that you are already setting).