AJAX CORS 请求来源被阻止 - Java Web 服务

Question

每次我们尝试通过 AJAX JQuery 访问我的 REST Web 服务时，都会被 Cross-Origin 阻止：

跨域请求被阻止：同源策略不允许读取 http://***** 上的远程资源 （原因：CORS 标头“Access-Control-Allow-Origin”缺失）。

我们在 Glassfish 3.1.2 上使用 Java REST Web 服务，客户端使用 Firefox Quantum 57。

请看下面的代码：

$.ajax({
    type: 'POST',
    url: webservice + "/webresources/ivi/syncPassphrase",
    crossOrigin: true,
    data :JSON.stringify({
      'passPhrase' : passphrase
    }),
    dataType: 'json',
    async: false,
    contentType: 'application/json; charset=utf-8',
    crossDomain: true,
    success: function(data){ 
      syncData = data["output"];  
    }, error: function(){  

    }
});

我们已经阅读了关于 SO 的几个答案，并尝试过如下方式：

$.ajax({
    type: 'POST',
    url: webservice + "/webresources/ivi/syncPassphrase",
    crossOrigin: true,
    data :JSON.stringify({
      'passPhrase' : passphrase
    }),
    xhrFields: {
        withCredentials: true
    },
    dataType: 'json',
    async: true,
    contentType: 'application/json; charset=utf-8',
    crossDomain: true,
    timeout: 20000,
    beforeSend: function(xhr){ 
        xhr.setRequestHeader("Access-Control-Allow-Origin",'http://111.111.111.111:8080');
    },
    success: function(data){ 
      syncData = data["output"];  
      console.log("xxx1 " + syncData);
    }, error: function(xhr, status, error) {
      console.log("xxx2 " + xhr.responseText + " | " + status + " | " + error + " | ");
    }
});

但上面的代码仍然会产生同样的错误。

在服务器端，我们设置了允许跨源每个请求并响应如下代码：

@Override
public void filter(final ContainerRequestContext requestContext,
                  final ContainerResponseContext cres) throws IOException {
  cres.getHeaders().add("Access-Control-Allow-Origin", "*");
  cres.getHeaders().add("Access-Control-Allow-Headers", "origin, content-type, accept, authorization");
  cres.getHeaders().add("Access-Control-Allow-Credentials", "true");
  cres.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
  cres.getHeaders().add("Access-Control-Max-Age", "1209600");
}

我没有主意了。有什么想法吗？

谢谢

Answer 1

有几点：

1. 您不需要在请求中发送 ACAO 标头 - 这段客户端代码什么都不做：

   beforeSend: function(xhr){
       xhr.setRequestHeader("Access-Control-Allow-Origin",'http://111.111.111.111:8080');
   },
   

2. Access-Control-Allow-Origin * (ACAO) 响应标头与 Access-Control-Allow-Credentials: true (ACAC) 标头不兼容。如果您需要 cookie 或身份验证，则必须指定 Access-Control-Allow-Origin: {value-of-Origin-request-header}

第二个可能会解决它。

更新

你的服务器代码应该是这样的：

@Override
public void filter(final ContainerRequestContext requestContext,
              final ContainerResponseContext cres) throws IOException {
  cres.getHeaders().add("Access-Control-Allow-Origin", "http://your-origin:port");
  cres.getHeaders().add("Access-Control-Allow-Headers", "origin, content-type, accept, authorization");
  cres.getHeaders().add("Access-Control-Allow-Credentials", "true");
  cres.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
  cres.getHeaders().add("Access-Control-Max-Age", "1209600");
}

但将 http://your-origin:port 替换为发出请求的页面域（如果不是 80，则包括端口）。我不知道您的服务器代码，但如果您可以检索 Origin 请求标头的值，而不是对其进行硬编码，那就更好了。

这样更有意义吗？