且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-03-10 05:03:12

您在评论中提到,使用邮递员可以获得预期的响应.这是一个很好的起点.我怀疑通过从终端使用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>

您现在应该准备出发.