使用 Jquery 1.10.2 进行跨域请求

Question

我提出以下要求：

function doPoolPartyGetChildrenAjaxRequest(parent) {

return $.ajax({

    url: "http://127.0.0.1:8086/PoolParty/api/thesaurus/1DCE2E49-7DD8-0001-524C-1A1B14A0141A/childconcepts",

    data: {language: "en", parent: parent, properties: "skos:narrower"},

    username: 'xxxx',
    password: 'xxxx',

    dataType: 'json',

    crossDomain: true,


    beforeSend: function (req) {
        req.setRequestHeader('Authorization', 'Basic ' + btoa('superadmin:poolparty'));
    },

    xhrFields: {
        withCredentials: true
    },

    error: function (jqXHR, textStatus, errorThrown) {
        console.log(textStatus);
    },

    success: function (data) {

        for (var i = 0; i < data.length; i++) {
            data[i].title = data[i].prefLabel

            if (!(data[i].narrowers === undefined)) {
                data[i].lazy = true
            }
        }

        data.sort(function(a, b) {

            if (a.prefLabel.toLowerCase() == b.prefLabel.toLowerCase())
                return 0;
            if (a.prefLabel.toLowerCase() > b.prefLabel.toLowerCase())
                return 1;
            else
                return -1

        });

    }
})

我需要做什么才能让它工作，这是我得到的错误：

选项http://127.0.0.1:8086/PoolParty/api/thesaurus/1DCE2E49-7DD8-0001-524C-1A1B…Fthesaurus.iadb.org%2Fpublicthesauri%2FIdBTopics&properties=skos%3Anarrower 401（未经授权） m.ajaxTransport.send
m.extend.ajax doPoolPartyGetChildrenAjaxRequest setPoolPartyTreeBroswer
（匿名函数）
m.回调.j m.Callbacks.k.fireWith
m.extend.ready
Ĵ XMLHttpRequest 无法加载 http://127.0.0.1:8086/PoolParty/api/thesaurus/1DCE2E49-7DD8-0001-524C-1A1B14A0141A/childconcepts?language=en&parent=http%3A%2F%2Fthesaurus.iadb.org%2Fpublicthesauri%2FIdBTopics&properties=skos%3Anarrower。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:63342' 不允许访问。响应具有 HTTP 状态代码 401。 错误

我不太理解这个错误。如何查看我的代码是否将正确的标头发送到服务器？我如何查看服务器的响应。

我的 Tomcat 7 配置如下：

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
  <init-param>
    <param-name>cors.support.credentials</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>cors.preflight.maxage</param-name>
    <param-value>10</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

我不知道我还需要做什么。请任何人都可以指导我。

我如何检查事情，什么是发送接收。 jquery 1.10.2 有什么特别之处吗？

Tomcat 7 的 corsfilter 有问题吗？

我过去曾使用过tomcat6。从那以后我改用tomcat 7，它根本不起作用。

Answer 1

您还需要设置 Access-Control-Allow-Origin 响应标头才能使 CORS 工作

试试

 headers.add("Access-Control-Allow-Origin", "*");

我之前已经像 Spring MVC 中的 this 那样做。

package org.springframework.web.servlet.support;

import java.io.IOException;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.filter.OncePerRequestFilter;

public class CorsFilter extends OncePerRequestFilter {

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
            throws ServletException, IOException {
        response.addHeader("Access-Control-Allow-Origin", "*");        
        if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())); {
            // CORS "pre-flight" request
            response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
            response.addHeader("Access-Control-Allow-Headers", "Authorization");        
            response.addHeader("Access-Control-Max-Age", "1728000");
        }
        filterChain.doFilter(request, response);
    }

}

// example web.xml configuration

/*
  <filter>
    <filter-name>cors</filter-name>
    <filter-class>org.springframework.web.servlet.support.CorsFilter</filter-class>
  </filter>

  <filter-mapping>
    <filter-name>cors</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
*/

我也做了here提到的事情

package com.zhentao;
import java.io.IOException;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.filter.OncePerRequestFilter;
public class CorsFilter extends OncePerRequestFilter {

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
            throws ServletException, IOException {
        if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
            // CORS "pre-flight" request
            response.addHeader("Access-Control-Allow-Origin", "*");
            response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
            response.addHeader("Access-Control-Allow-Headers", "Content-Type");
            response.addHeader("Access-Control-Max-Age", "1800");//30 min
        }
        filterChain.doFilter(request, response);
    }
}

web.xml 也需要添加以下内容：

  <filter>
    <filter-name>cors</filter-name>
    <filter-class>com.zhentao.CorsFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>cors</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

Answer 2

您是否在禁用 CORS 的情况下运行 Chrome？尝试从命令行运行：

google-chrome --disable-web-security

有关如何禁用网络安全的更多信息，请查看here