如何消除基于java的Web服务服务器中请求的资源错误中没有Access-Control-Allow-Origin头

Question

我试图构建一个webservice（基于Java的服务器和基于Javascript的客户机），我只需要发送一个带有json数据的Post请求，我需要从服务器得到一个带有json数据的Post响应。到目前为止，我已经实现了这些：（我的客户端实现与html5 rocs教程几乎相同）

Web服务客户端(js)：

    // I call client = new WSclient() in one of my js files   
    WSclient=function(){
      makeCorsRequest();
    }

    // Create the XHR object.
    function createCORSRequest(method, url) {
      var xhr = new XMLHttpRequest();
      if ("withCredentials" in xhr) {
        // XHR for Chrome/Firefox/Opera/Safari.
        xhr.open(method, url, true);
      } else if (typeof XDomainRequest != "undefined") {
        // XDomainRequest for IE.
        xhr = new XDomainRequest();
        xhr.open(method, url);
      } else {
        // CORS not supported.
        xhr = null;
      }
      return xhr;
    }

    // Helper method to parse the title tag from the response.
    function getTitle(text) {
      return text;
    }

    // Make the actual CORS request.
    function makeCorsRequest() {
      // All HTML5 Rocks properties support CORS.
      var url = 'http://localhost:8080/myapp/myfunction';
      var xhr = createCORSRequest('POST', url);
      xhr.setRequestHeader(
          'X-Custom-Header', 'value');
      xhr.send();
    }

Web服务服务器（java）

@Path("/myapp/")
@Consumes(MediaType.APPLICATION_JSON)
@Produces(MediaType.APPLICATION_JSON)
public class myFunctionClass {


    @POST
    @Path("myfunction")
    public Response recommendations(User inf){
        // From the client I also need to send json 
        // like {"name":"john","surname":"smith","name":"marry","surname":"smith"}
        // and if possible I want to put this infformation inside inf object
        List<String> infos = inf.getInformation();

         // here I call one of the my methods to get recommendations
         // I remove it for simplicity and just put type of recommendations object 
         // list<Recommendation> recommendations= runFunction(infos);

        final StringWriter sw =new StringWriter();
        final ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(sw, recommendations);
        System.out.println(sw.toString());
        sw.close(); 


        return Response.ok(sw.toString(), MediaType.APPLICATION_JSON).header("Access-Control-Allow-Origin", "*")
                .header("Access-Control-Allow-Methods", "POST").allow("OPTIONS").build();


    }
}

    XMLHttpRequest cannot load      http://localhost:8080/myapp/myfunction. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access.

编辑

当我移除

 xhr.setRequestHeader(
              'X-Custom-Header', 'value');  

从客户端来说，它工作正常。正如我之前所说，这是我第一次使用Web服务和javascript，所以实际上我不知道这行代码是做什么的。谁能解释一下它存在与否会发生什么？

xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

Answer 1

发生的情况是，在初始请求之前发出了一个飞行前请求（它是options请求）。因此，您需要一个@optionsendpoint来处理该请求（即设置响应头）。在当前代码中，您试图在原始请求的endpoint响应中设置它，而OPTIONS请求甚至无法到达该endpoint响应。

一种更常见的方法，不是为每个目标创建@optionsendpoint，而是使用Jersey过滤器，如本答案所示。所有请求的头都将被发送出去。

另见：

null

@OPTIONS
@Path("myfunction")
public Response cors() {
    return Response.ok()
        .header("Access-Control-Allow-Origin", "*")
        .header("Access-Control-Allow-Methods",
            "GET, POST, PUT, DELETE, OPTIONS, HEAD")
        // whatever other CORS headers
        .build();
}