CORS remain on SecurityError: The operation is insecure

Question

I have an http server developped using Express in nodejs. The server is running locally on port 3000.

There is an html page served (index.html) which call ajax GET contents (as html content-type). Those ajax content are also served with the same server on the same port, in the same http protocole.

In the node server application, I have added Cors Same Origin headers, but, the index.html is still having error in console: "Security Error: The operation is insecure".

In the browser console, I successfully see the headers from the node Express app about "Access-Control-Allow-Origin", etc ...

Additionally, the same application is also serving another page, and the index.html can successfully get data w/o any Security Error.

Do you have any other advice?

function getData(url, type, CType, id) {
  //var xhr = new XMLHttpRequest();
  //xhr.open(type, url, true);
  //xhr.withCredentials = true;
  //xhr.onload = function () {
  //console.log(xhr.responseText);
  //if(CType == 'text/html') { $(id).append(xhr.responseText); }
  //};
  //xhr.send();

$.ajax({
  url: url,
  type: type,
  crossDomain:true,
  cors:true,
  success: function(data){ 
    $(id).append(data);
  },
  error: function(data) {
    console.log('ERROR '+url);
    console.log(data);
  $(id).append(getError(url));
  }
});


getData(location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '')+'/modules/mymodule', 'text/html', 'GET', '#content');

It looks like both the requests are either HTTP or HTTPS (not a mix). Is that the case? Are there any redirects involved? (Actually, it looks like you are making a request to the *same* origin, why are you just using a relative URL?) — Quentin, May 14 '16 at 22:44
What browser are you testing in? If you try a different browser do you get a different (and perhaps more enlightening) error message? — Quentin, May 14 '16 at 22:45
> why are you just using a relative URL? Hum.. that's a good question.. and there is no reason... Just tested in relative: getData('/modules/mymodule', 'text/html', 'GET', '#content'); and I'm having the same result. — Paul Ernond, May 15 '16 at 10:56
initially tested with Firefox 44.0.2 and Chromium 48.0.2564.82 gives: "SyntaxError: Failed to execute 'open' on 'XMLHttpRequest': 'TEXT/HTML' is not a valid HTTP method." — Paul Ernond, May 15 '16 at 11:01

score 0 · Accepted Answer · answered May 15 '16 at 11:07

0

initially tested with Firefox 44.0.2 and Chromium 48.0.2564.82 gives: "SyntaxError: Failed to execute 'open' on 'XMLHttpRequest': 'TEXT/HTML' is not a valid HTTP method."

You have your middle two arguments backwards.

getData(location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '')+'/modules/mymodule', 'text/html', 'GET', '#content');

The second argument should be "GET" and the third argument "text/html".

answered May 15 '16 at 11:07

Quentin

914,110
126
1,211
1,335

1

ohhhh.... dear ... I'm feeling so ..... stupid ... – Paul Ernond May 15 '16 at 11:10

score -1 · Answer 2 · edited May 23 '17 at 12:24

-1

Try adding these three parameters in the ajax call from your client to the server

  crossDomain:true,
  cors:true,
  contentType:"application/json;charset=utf-8",

Edited one:

 $.ajax({
   url: url,
   type: type,
   method:"GET",
   crossDomain:true,
   cors:true,
   contentType:"application/html;charset=utf-8"
   success: function(data){ 
     $(id).append(data);
   },
  error: function(data) {
    console.log('ERROR '+url);
    console.log(data);
   $(id).append(getError(url));
  }
});

Also if you didnt get this approach right try this:

Add Header in AJAX Request with jQuery

edited May 23 '17 at 12:24

Community

1
1

answered May 14 '16 at 19:15

Kartikeya Sharma

553
1
5
22

unfortunately it ends with the same error. – Paul Ernond May 14 '16 at 19:29
`crossDomain:true,` causes jQuery to suppress the custom HTTP headers it normally adds to an XHR request to the same origin in case it gets an HTTP redirect to a different origin. If this was the problem, the error would be complaining about the Access-Control-Allow-Headers header. – Quentin May 14 '16 at 22:42
`cors:true,` is not a option supported by the ajax function. It will be ignored. – Quentin May 14 '16 at 22:42
`contentType:"application/json;charset=utf-8",` makes no sense at all. The OP is making a GET request, there is no request body to describe the content-type of. – Quentin May 14 '16 at 22:43
yes it does not make sense as your return datatype is html – Kartikeya Sharma May 15 '16 at 05:54
crossDomain, cors, contentType (as html, json) : not solving. Add headers in "$.ajax(" : what header did you suggest? – Paul Ernond May 15 '16 at 07:10
@KartikeyaSharma — No, it doesn't make sense because there is no content to describe the type of. It is entirely possible (albeit unusual) to make a JSON encoded POST request and get some HTML in the response, but that isn't what is happening here, it is a GET request, there is no request body to describe the content type of). – Quentin May 15 '16 at 10:58

CORS remain on SecurityError: The operation is insecure

2 Answers2