403使用基本身份验证和ajax调用REST API时禁止

时间:2016-06-15 17:40:50

标签: javascript ajax rest tomcat cors

我试图编写一个JS脚本,通过其支持的REST API调用Atlassian Stash。该脚本驻留在端口80上。服务器位于端口7990上。我最初收到跨域脚本错误。我通过启用CorsFilter'来解决这个问题。在我的tomcat安装的web.xml中。

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

重新启动tomcat后,以下函数实际上检索了页面而不是抛出跨域脚本错误:

function listReviews() {
    $.get("http://mydomain:7990/rest/api/1.0/projects/", function(data) {
        // ...
    });
}

但是,数据是空的:

{"size":0,"limit":25,"isLastPage":true,"values":[],"start":0}

我发现它需要身份验证才能检索我请求的数据(退出存储会导致相同的空响应),所以我创建了以下内容:

function listReviews() {
    var urlBase = 'http://mydomain:7990/rest/api/1.0/';
    var urlPart = 'projects/';
    var urlFull = urlBase+urlPart;
    var username = 'username';
    var password = 'password';

    $.ajax({
        type: 'GET',
        url: urlFull,
        dataType: 'json',
        context: this,
        beforeSend: function (xhr) {
            xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
        },
        success: function() { $('#content').append("success<br>"); },
        error: function() { $('#content').append("fail<br>"); }
    });
}

然而,它现在给我一个不同的错误,我无法解决。

  

XMLHttpRequest无法加载http://mydomain:7990/rest/api/1.0/projects/。对预检请求的响应没有通过访问控制检查:否&#39;访问控制 - 允许 - 来源&#39;标头出现在请求的资源上。起源&#39; http://mydomain&#39;因此不允许访问。响应的HTTP状态代码为403。

用户名和密码是对的。如果我查看第一个listReviews()函数的响应标头,我会看到

Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://mydomain

但是,使用第二个listReviews()函数时,响应(403)标题不包含上述内容,这似乎是问题所在。

1 个答案:

答案 0 :(得分:1)

当然,在编写了大量的StackOverflow问题之后,我几乎立即弄明白了。

更改了启用CORS的tomcat web.xml过滤器,如下所示。显然,默认情况下不启用“授权”。

var inputField = document.getElementById("inputField");
inputField.focus(); 
inputField.onkeyup = function (event) {

  if (event.which === 13) { 
    var taak = inputField.value;

    if (inputField.value.length === 0 || inputField.value == " ") {
      return false;
    }

    addNewItem(document.getElementById("todoList"), taak); 

    inputField.focus();
    inputField.select();
  }
};


function addNewItem(list, taak) {
  var date = new Date();
  var id = " " + date.getHours() + date.getMinutes() + date.getSeconds() + date.getMilliseconds();

  var listItem = document.createElement("li");
  listItem.id = "taakItem" + id;

  var checkBox = document.createElement("input");
  checkBox.type = "checkbox"; 
  checkBox.id = "checkbox" + id; 
  checkBox.addEventListener("click", updateItemStatus);

  var gebeurtenis = document.createElement("gebeurtenis");
  gebeurtenis.id = "item" + id; // item + tijd
  gebeurtenis.innerText = taak;
  gebeurtenis.addEventListener("dblclick", deleteItem); 

  listItem.appendChild(checkBox); 
  listItem.appendChild(gebeurtenis); 

  list.appendChild(listItem); 

}  

function updateItemStatus() {
  var checkboxId = this.id.replace("checkbox", "");
  var taak = document.getElementById("item" + checkboxId);

  if (this.checked) {
    taak.className = "checked"; // Geeft classnaam checked voor de     opmaak
  } else {
    taak.className = ""; // Als hij niet aangevinkt is, gebeurt er     niets
  }
}


function deleteItem() {
  var gebeurtenisId = this.id.replace("item", "");
  document.getElementById("taakItem" + gebeurtenisId).style.display =     "none";
}

var deleteAll = document.getElementById("deleteAll");