CORS：请求的资源上不存在 'Access-Control-Allow-Origin' header

Question

我正在开发 D3 - grunt-cli 应用程序，在向 Fuseki 服务器发送 post 请求时，我遇到了 CORS 问题。

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);

    })


  }

以上是我尝试发出请求的代码。仅当我在浏览器扩展中启用 CORS 插件时才有效。

我还尝试通过更改 gruntfile.js 中间件来包含访问权限。但这没有帮助。从中我几乎可以肯定这是服务器端的一些问题。

我的依赖如下：

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

尝试了网上找到的大部分解决方案，但除了直接阻止浏览器中的 CORS 检查外，没有任何效果。我正在尝试从“http://localhost:8000/' to the Fuseki Server 'http://localhost:3030/”发出请求。

我得到的错误是：

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.

请求headers:

还检查了似乎具有 CORS 设置的 Fuseki 配置的 web.xml 文件：

<!-- 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>

Answer 1

要使 CORS 正常工作，您必须在目标服务器上启用它，在这种情况下，在您的 Fuseki 服务器上。来自 Wikipedia doc on CORS:

Note that in the CORS architecture, the Access-Control-Allow-Origin header is being set by the external web service (service.example.com), not the original web application server (www.example.com). Here, service.example.com uses CORS to permit the browser to authorize www.example.com to make requests to service.example.com.

这里有一个要点，尽管是合理的警告，但我还没有在我的服务器上尝试过： https://gist.github.com/danja/e8ecbf7e51f7a2616122

Answer 2

CORS 请求使用 Origin header，响应将是 header，例如 Access-Control-Allow-Origin。

代码在请求中设置响应 headers headers 并且没有 "Origin".

CORS：请求的资源上不存在 'Access-Control-Allow-Origin' header

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

d3.js

gruntjs

fuseki

lodash