带有 basicauth 的 Ajax CORS 请求在浏览器上出现 401 错误

Posted 2023-03-04

【中文标题】带有 basicauth 的 Ajax CORS 请求在浏览器上出现 401 错误

【英文标题】：Ajax CORS request with basicauth gives 401 error on browser

【发布时间】：2018-08-07 21:54:27

【问题描述】：

我知道有很多关于同一问题的帖子，但没有一个能解决我的问题。

我有一个带有以下 API 的 springboot 微服务应用程序

@RestController
@RequestMapping( "/sample" )
public class SampleController 


    @CrossOrigin(origins = "http://192.168.0.31:8080", allowCredentials = "false", allowedHeaders = "*")
    //@CrossOrigin//(allowCredentials = "false")
    @RequestMapping(value="/welcome" , method=RequestMethod.POST, produces="application/json")
    public JSONObject getWelcomeResponse(@RequestParam Map<String,String> request)
        JSONObject response=new JSONObject();

        response.put("response", "Welcome user");
        System.out.println("Complterd ****");
        return response;
    

属性文件

server.port=8081
security.user.name=test
security.user.password=test123
#security.basic.enabled=false

我的客户端代码是

 $(document).ready(function()
            $.ajax(
                url: "http://192.168.0.31:8081/sample/welcome",
                type : "POST",
                crossDomain:true,
                crossOrigin:true,

                beforeSend: function (xhr) 
                    // Use BASIC Authentication
                    xhr.setRequestHeader ("Authorization", "Basic " + btoa("test:test123"));
                ,
                error: function(xhr, status, errorThrown) 
                    alert(status, errorThrown);
                    // Error block
                    console.log("xhr: " + xhr);
                    console.log("status: " + status);
                    console.log("errorThrown: " + errorThrown);
                
            )
            .then(function(data, status, xhr) 
                alert(data);
                console.log("xhr: " + xhr);
                console.log("status: " + status);
                console.log("data: "+ data);

                $('.message').append(JSON.stringify(data));

            );
        );

当我禁用基本身份验证时，cors 请求工作正常。但是如果启用它会给出 401 preflight request 错误。

我也尝试了@CrossOrigin 的默认方式和自定义方式。但得到同样的错误。还尝试使用如下过滤器类。

@EnableWebMvc
public class MyAppConfigurations  implements Filter 

       @Override
       public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)

                     throws IOException, ServletException 

              HttpServletResponse httpResponse = (HttpServletResponse) response;

              HttpServletRequest httpRequest = (HttpServletRequest) request;

              if("OPTIONS".equalsIgnoreCase(httpRequest.getMethod())) 

                     httpResponse.setStatus(HttpServletResponse.SC_OK);
                     System.out.println("filterde response");

               else 

                     chain.doFilter(request, response);

              
       

有人可以帮我弄清楚我在这段代码中缺少什么。

【参考方案1】：

您必须为您的Spring MicroService 创建CORS FILTER

import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter 

    @Override
    public void doFilter(ServletRequest req, ServletResponse res,
                         FilterChain filterChain) throws IOException, ServletException 
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        if (response instanceof HttpServletResponse) 
            addCorsHeader(response);
            if ("OPTIONS".equalsIgnoreCase(request.getMethod())) 
                response.setStatus(HttpServletResponse.SC_OK);
             else 
                filterChain.doFilter(req, res);
            
        
    

    private void addCorsHeader(HttpServletResponse response) 
        response.addHeader("Access-Control-Allow-Origin", "http://localhost:4200"); // Update with yours
        response.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, HEAD");
        response.addHeader("Access-Control-Allow-Credentials", "true");
        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 
    

【讨论】：

如果我的回答解决了您的问题，请接受。

【参考方案2】：

在类前添加@CrossOrigin

@RequestMapping( "/sample" )
@CrossOrigin(origins = "http://192.168.0.31:8080")
public class SampleController 

尝试添加您的 /welcome Rest Controller

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");

【参考方案3】：

根据CORS specification，CORS 预检请求必须在没有任何身份验证的情况下被接受。

您必须配置您的 Web 服务器或 Spring Security 以禁用与预检相关的所有 OPTIONS 请求的身份验证。