Cross Origin Requests Are Only Supported for Http But It's Not Cross-Domain

Cross origin requests are only supported for HTTP. error when loading a local file

My crystal ball says that you are loading the model using either file:// or C:/, which stays true to the error message as they are not http://

So you can either install a webserver in your local PC or upload the model somewhere else and use jsonp and change the url to http://example.com/path/to/model

Origin is defined in RFC-6454 as

   ...they have the same
   scheme, host, and port.  (See Section 4 for full details.)

So even though your file originates from the same host (localhost), but as long as the scheme is different (http / file), they are treated as different origin.

Cross origin requests are only supported for HTTP but it's not cross-domain

You need to actually run a webserver, and make the get request to a URI on that server, rather than making the get request to a file; e.g. change the line:

    $.get("C:/xampp/htdocs/webname/resources/templates/signup.php",

to read something like:

    $.get("http://localhost/resources/templates/signup.php",

and the initial request page needs to be made over http as well.

Cross origin requests are only supported for HTTP not fixed even after Chrome --allow-file-access-from-files

Different port number cause the cross origin issue as well:http: //localhost:8000 access a json file which is from http: //localhost:8080. There are various ways to resolve cross-origin resource accessing issue, such as CORS, Server-proxy and JSONP.

I think you could try to use JSONP to solve this issue in your case.

Step 1: Update the dashboard.json and change the file type to javascript. (Refer to this doc if you want to know how JSONP works)

//assume that the json data looks like this {tabs:[{id:"1",name:"tab1",status:"on"},{id:"2",name:"tab2",status:"off"}]}
var data = {tabs:[{id:"1",name:"tab1",status:"on"},{id:"2",name:"tab2",status:"off"}]};        
onGetDashboardJSON(data);

Step 2: Use $.ajax to fetch cross origin json data in JSONP way

$.ajax({
    url: "http://localhost:8080/dashboard.js",
    dataType:"jsonp",
    success: function(response){

    },
    error: function(response){

    }
});

function onGetDashboardJSON(result){
    //do anything you want with the JSON 
    console.log(result);
}

Hope this helpful.

Angular - Cross origin requests are only supported for protocol schemes - need workaround to run $http in local

Try with a pure javascript filereader

function readSingleFile(e) {  var file = e.target.files[0];  if (!file) {    return;  }  var reader = new FileReader();  reader.onload = function(e) {    var contents = e.target.result;    displayContents(contents);  };  reader.readAsText(file);}
function displayContents(contents) {  var element = document.getElementById('file-content');  element.innerHTML = contents;}
document.getElementById('file-input')  .addEventListener('change', readSingleFile, false);

<input type="file" id="file-input" /><h3>Contents of the file:</h3><pre id="file-content"></pre>

Cross origin requests are only supported for HTTP

You can add templates such as p1.html and p2.html in your index.html by putting them inside script tags, as mentioned in the docs.

<script type="text/ng-template" id="p1.html">
  This is the content of the template
</script>

Then angular will no longer need to make AJAX requests to fetch them.

Do note that these script elements must appear after ng-app.

---

Related Topics