0

Edit: Not duplicate, as my problem fails on every browser as mentioned; Edge, Chrome, FF etc.

I have a html file which will be on the person's machine, rather than on an http protocol. Note: it is important that it will be an html file on the person's machine.

Within the javascript is:

var dataARR = {
    mydata: "No Data"
};

var dataJSON = JSON.stringify(dataARR);
$.support.cors = true;
$.ajax({
    type: "POST",
    url: "http://www.mywebsite.com/exclude.php",
    async: true,
    cache: false,
    contentType: "application/json; charset=utf-8",
    crossDomain: true, // This needs to be true for other people
    data: { myJson: dataJSON },

    success: function (data) {
        var json = eval('(' + data + ')');
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        // Silent error
        var zz = 2;
    }
});

The file on my server http://www.mywebsite.com/exclude.php is basic for testing.

exclude.php

header("Access-Control-Allow-Origin: *"); // To allow cross domain
$arr = ["181K2", "4V419"];
echo json_encode($arr);

This does not work if the html file on the person's local machine is launched from Edge, Chrome etc.

Edge gives the error XMLHttpRequest: Network Error 0x80070005, Access is denied..

Chrome gives the error XMLHttpRequest cannot load http://www.mywebsite.com/exclude.php. Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

Firefox: I am not sure how to find the FF error as I do not debug in FF generally and am unused to the system. However, when I put the breakpoints in I end up in the section error: function (XMLHttpRequest, textStatus, errorThrown) {

Rewind
  • 2,554
  • 3
  • 30
  • 56
  • `crossDomain: true, // This needs to be true for other people` — The only needs to be true if you are making the request to the *same* origin and then following an HTTP redirect to a different origin. – Quentin Mar 20 '17 at 14:19
  • `contentType: "application/json; charset=utf-8",` — Your request body is not formatted as JSON. This is wrong. – Quentin Mar 20 '17 at 14:19
  • `$.support.cors = true;` overriding jQuery's detection of the CORS support in the user's web browser is either going to do nothing or break things. Don't do that. – Quentin Mar 20 '17 at 14:20
  • `async: true,` — That's the default. There's no point in being explicit. – Quentin Mar 20 '17 at 14:20
  • `var json = eval('(' + data + ')');` — That's a terrible way to parse JSON … and jQuery will parse it for you if the server outputs the correct content-type. – Quentin Mar 20 '17 at 14:20
  • "Edit: Not duplicate, as my problem fails on every browser as mentioned; Edge, Chrome, FF etc." — Then relate the error messages the other browsers give you. – Quentin Mar 20 '17 at 14:25
  • @Quentin - could you give an alternative to `var json = eval('(' + data + ')');` – Rewind Mar 20 '17 at 14:56
  • "jQuery will parse it for you if the server outputs the correct content-type" – Quentin Mar 20 '17 at 14:59

1 Answers1

1

Chrome gives the error XMLHttpRequest cannot load http://www.mywebsite.com/exclude.php. Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

So either:

  1. Respond to the preflight request with permission to include the Content-Type on the request or
  2. Don't set the Content-Type

I recommend option 2 because you are not formatting the request body as JSON.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • OK, I removed the `contentType` and I have got a little further. It now works on Chrome, but now gives the following error on Edge: `XMLHttpRequest: Network Error 0x2efd, Could not complete the operation due to error 00002efd.` – Rewind Mar 20 '17 at 14:39