使用 application/json contentType 的 AJAX POST 调用获取“没有 'Access-Control-Allow-Origin' 标头”错误答案

【问题标题】：AJAX POST call with application/json contentType gets "no 'Access-Control-Allow-Origin' header" error使用 application/json contentType 的 AJAX POST 调用获取“没有 'Access-Control-Allow-Origin' 标头”错误
【发布时间】：2017-07-30 09:32:08
【问题描述】：

我有下面的 Javascript 函数。每当我运行它（使用 WebView 从 Android 应用程序调用它）时，尽管具有 dataType: "json" 属性，它仍以 application/x-www-form-urlencoded 的形式发送。

如果我添加contentType: "application/json; charset=utf-8"，那么甚至没有从服务器收到请求并且我得到错误：

XMLHttpRequest 无法加载 https://example.com/api。回应预检请求未通过访问控制检查：否 'Access-Control-Allow-Origin' 标头出现在请求的资源。因此不允许访问 Origin 'null'。

请求标头如下所示：

OPTIONS /api HTTP/1.1
Host: example.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8,es;q=0.6

服务器是在 Jetty Embedded 上运行的 Java Servlet，它甚至没有 WEB-INF 或 web.xml，因为它不是 Web 应用程序而是 API。服务端连请求都没有收到，估计加response.addHeader("Access-Control-Allow-Origin", "*");解决不了

响应标头：

HTTP/1.1 200 OK
Allow: POST, TRACE, OPTIONS
Content-Length: 0
Server: Jetty(9.0.z-SNAPSHOT)

客户端 Javascript

function create(userId, callback) {

  var submitData = {
    "action": "create",
    "userId": userId
  };

  $.ajax({
    data: JSON.stringify(submitData),
    type: "POST",
    url: "https://www.example.com/api",
    dataType: "json"
  })
  .done(function(data) { callback(SUCCESS); })
  .fail(function() { callback(UNKNOWN_ERROR); });
}

编辑：尝试在没有 JQuery 的情况下执行此请求，但仍然无法正常工作。

  var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
  xmlhttp.open("POST", "https://www.example.com/api");
  xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
  xmlhttp.send(JSON.stringify(submitData));

【问题讨论】：

servlet 在哪个容器上运行？在 tomcat 中，您可以轻松配置 CORSFilter 以允许跨域请求。
@Harald 在码头
如果我有时间，我今晚回家后试试你的代码。
我现在看到我遇到了与您相同的问题（但对于 GET 请求），我通过添加 xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "*") 解决了它;
我希望你能尽快使用它。我过去曾遇到过无法解决的 AJAX 问题，所以是的，让 AJAX 始终正常工作可能会很棘手。

标签： java ajax servlets cors

【解决方案1】：

这对我有用（我使用的是Tomcat，而不是Jetty）。我没有对JSON有效载荷做任何事情，只是测试了服务器上的URL是否被命中。

AJAX（纯 JavaScript）

function issueAjaxPost(){
  var url = "http://localhost:8085/some_url/servlet/PostJson";
  var json = '{ "action": "create", "userId": userId }';

  xmlhttp.open("POST", url, true);
  xmlhttp.setRequestHeader("Content-type", "application/json");
  xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
  xmlhttp.send(json);
}

Servlet

public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException  {
  String url = request.getRequestURL().toString();
  String page = url.substring(url.lastIndexOf("/"));

  ...

  if("/PostJson".equals(page)){
    response.setContentLength("success".length());
    response.setContentType("text/plain");
    response.setStatus(HttpServletResponse.SC_OK);
    response.getWriter().write("success");
  }
}

AJAX 回调（结果）

xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("txt2").innerHTML = this.responseText;      //the result (success)
  }
};

【讨论】：