飞行前的响应具有无效的HTTP状态代码:401 angular [英] Response for preflight has invalid HTTP status code: 401 angular

问题描述

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

Using angular and Spring Boot we're trying to add authentication to our service but for some reason we can't 'open' and fetch data from an url we know works

角度:

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

(当前登录令牌已进行硬编码以用于测试)

(currently the login token is hard coded for testing purposes)

其他服务:

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

CrossOrigin = *应该解决CORS问题，但是这个失败的URL调用确实很奇怪.

CrossOrigin = * should take care of the CORS issue but this failed URL call is really weird.

我们尝试过的其他事情:

Extra things we've tried:

'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 = {};

推荐答案

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

You have mentioned in your comments that by using postman you can get the response as expected. That is a good starting point. I suspect that by using the curl command curl -i -X URL from the terminal also returns the correct response.

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

If postman works correctly, you have to be aware by the fact that right before making a request angular sends another request, called pre-flight request, which does a minimal check to the endpoint at the server side.

此请求是 OPTIONS 类型的请求.

This request is an OPTIONS type request.

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

First, you have to make sure that your dispatcherServlet accepts OPTIONS requests. You can achieve this either by specifying it in a *.properties configuration file , such as:

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过滤器.

After you have configured it to accept OPTIONS requests, create a Filter.java and configure a CORS filter.

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

You can guide by the following example:

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.

In the end, don't forget to add this filter in web.xml along with the following 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>

您现在应该准备出发.

这篇关于飞行前的响应具有无效的HTTP状态代码:401 angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！