Search code examples
d3.jsgruntjslodashfuseki

CORS : No 'Access-Control-Allow-Origin' header is present on the requested resource

I am working on a D3 - grunt-cli application in which I am facing a CORS issue when sending post requests to a Fuseki Server.

function saveToFusekiFunc() {
    document.getElementById('fileid').click();
    document.getElementById('fileid').value = null;

    d3.select("#fileid").on("change", function() {
      var contents;
      var file = d3.select("#fileid").property("files")[0];
      console.log(file);
      var reader = new FileReader();
      reader.onload = function(e) {
      contents = e.target.result;
      console.log(contents);

    let xhr = new XMLHttpRequest();
    let url = "http://localhost:3030/Test/";

    xhr.open(
      "POST",
       url ,
      true
    );

    //xhr.setRequestHeader('Data-Type', 'jsonp');
    xhr.setRequestHeader('Content-Type', 'text/turtle;charset=utf-8');
    xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
    xhr.setRequestHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, DELETE, OPTIONS');
    xhr.setRequestHeader('Access-Control-Allow-Headers', 'Origin, Content-Type, X-Auth-Token');
    xhr.setRequestHeader('Access-Control-Allow-Origin', 'http://localhost:8000/');
    xhr.setRequestHeader('Access-Control-Max-Age', '86400');

    xhr.onreadystatechange = function()
    {
    if(xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
    }
    xhr.send(contents);
    };
    reader.readAsText(file);

    })


  }

Above is my code with which I try to make the request. This only works if I enable the CORS plugin in my browser extension.

I have also tried to include the access by making changes to the gruntfile.js middlewares. But it did not help. From which I am almost sure that this is some issue at the server end.

My dependenices are as shown below:

"dependencies": {
    "d3": "^3.5.6",
    "grunt-cli": "^1.3.2",
    "lodash": "^4.1.0"
  }

Have tried most of the solutions found online but nothing has worked other than directly blocking the CORS check in the browser. I am trying to make a request from 'http://localhost:8000/' to the Fuseki Server 'http://localhost:3030/'.

The error I am getting is:

Access to XMLHttpRequest at 'http://localhost:3030/Test/' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Request headers:

enter image description here

Also checked the web.xml file of the Fuseki configuration which seems to have the CORS settings:

<!-- CORS -->
  <filter>
    <filter-name>cross-origin</filter-name>
    <!-- Ported and standalone version of org.eclipse.jetty.servlets.CrossOriginFilter -->
    <filter-class>org.apache.jena.fuseki.servlets.CrossOriginFilter</filter-class>
    <!-- Defaults may be fine --> 
    <init-param>
      <param-name>allowedOrigins</param-name>
      <param-value>*</param-value>
    </init-param>
    <init-param>
      <param-name>allowedMethods</param-name>
      <param-value>GET,POST,DELETE,PUT,HEAD,OPTIONS,PATCH</param-value>
    </init-param>
    <init-param>
      <param-name>allowedHeaders</param-name>
      <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified, Authorization</param-value>
    </init-param>
    <init-param>
      <param-name>exposedHeaders</param-name>
      <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
    </init-param>
  </filter>
Solution

  • A CORS request used the Origin header and the response will be the headers such as Access-Control-Allow-Origin.

    The code sets response headers in the request with headers and does not have an "Origin".