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

【问题标题】：Ajax CORS request with basicauth gives 401 error on browser带有 basicauth 的 Ajax CORS 请求在浏览器上出现 401 错误
【发布时间】：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);

              }
       }
}

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

【问题讨论】：

标签： java ajax spring spring-boot cors

【解决方案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 请求的身份验证。

【讨论】：