小编典典

飞行前的响应具有无效的HTTP状态代码:401 angular

spring-boot

我们使用angular和Spring Boot尝试向服务中添加身份验证,但是由于某些原因,我们无法“打开”并从我们知道有效的网址中获取数据

角度:

this.getMismatches = function () {
    return $http({
            "async": true,
            "crossDomain": true,
            "url": GLOBALS.mismatchUrl,
            "method": "GET",
            "headers": {
                "authorization": "Basic YWRtaW46USNROawdNmY3UWhxQDlQA1VoKzU="
        }
    });
}

(当前登录令牌已硬编码用于测试目的)

休息服务:

@CrossOrigin(origins = "*")
@RequestMapping("/api/mismatch")
public List<Mismatch> home() {
    return service.getAll();
}

CrossOrigin = *应该解决CORS问题,但是失败的URL调用确实很奇怪。

我们尝试过的其他事情:

'Access-Control-Allow-Methods', 'GET, POST, OPTIONS'
'Access-Control-Allow-Origin', '*'
'Content-Type', json plaintext jsonp etc

App.js:
    $httpProvider.defaults.headers.common = {};
    $httpProvider.defaults.headers.post = {};
    $httpProvider.defaults.headers.put = {};
    $httpProvider.defaults.headers.patch = {};

阅读 400

收藏
2020-05-30

共1个答案

小编典典

您在评论中提到,使用邮递员可以获得预期的答复。这是一个很好的起点。我怀疑通过curl -i -X URL终端使用curl命令还会返回正确的响应。

如果邮递员工作正常,您必须意识到以下事实:在发出请求之前,角度会发送另一个称为 飞行前 请求的请求,该请求会对服务器端的终结点进行最小限度的检查。

该请求是 OPTIONS 类型的请求。

首先,必须确保您的 dispatcherServlet 接受 OPTIONS
请求。您可以通过在*.properties配置文件中指定它来实现此目的,例如:

spring.mvc.dispatch-options-request=true

或通过配置 web.xml

<servlet>
    <!--content eluded for clarity-->
    <init-param>
        <param-name>dispatchOptionsRequest</param-name>
        <param-value>true</param-value>
    </init-param>
</servlet>

将其配置为接受OPTIONS请求后,请创建一个Filter.java并配置CORS过滤器。

您可以通过以下示例进行指导:

public class CorsFilter implements Filter{

@Override
public void doFilter(ServletRequest request, ServletResponse response,
                     FilterChain filterChain) throws IOException, ServletException {

    if(response instanceof HttpServletResponse){
        HttpServletResponse alteredResponse = ((HttpServletResponse)response);
        addCorsHeader(alteredResponse);
    }

    filterChain.doFilter(request, response);
}

private void addCorsHeader(HttpServletResponse response){
    //TODO: externalize the Allow-Origin
    response.addHeader("Access-Control-Allow-Origin", "*");
    response.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, HEAD");
    response.addHeader("Access-Control-Allow-Headers", "Authorization, X-PINGOTHER, Origin, X-Requested-With, Content-Type, Accept");
    response.addHeader("Access-Control-Max-Age", "1728000");
}

@Override
public void destroy() {}

@Override
public void init(FilterConfig filterConfig)throws ServletException{}
}

最后,不要忘了将此过滤器web.xml与以下init-params一起添加。

<filter>
    <filter-name>cors-filter</filter-name>
    <filter-class>ai.surge.usrmngmtservice.util.cors.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,OPTIONS,PUT</param-value>
    </init-param>
    <init-param>
        <param-name>cors.exposed.headers</param-name>
        <param-value>Authorization,Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
    </init-param>
    <!--<init-param>-->
        <!--<param-name>cors.preflight.maxage</param-name>-->
        <!--<param-value>1800</param-value>-->
    <!--</init-param>-->
</filter>

您现在应该准备出发。

2020-05-30