Webpack服務器中的其余API調用（從角度）返回401

Question

Angular應用程序（在webpack開發服務器中執行），

它對部署在JETTY中的Spring應用程序進行REST調用（啟用了Spring Security / BASIC身份驗證）。

通過angular調用http：// localhost：8085 / myapi / api / login時 ，響應為： 401未經授權 （請求方法為OPTIONS，盡管指定為POST）

已經嘗試過發布與此相關的大多數解決方案（從Angular，Spring Security和web.xml（jetty）端啟用/發送CORS標頭。

需要什么？

Chrome中的錯誤 ： 對預檢請求的響應未通過訪問控制檢查：所請求的資源上不存在“ Access-Control-Allow-Origin”標頭

角度 ：

let headers =  new Headers();
headers.append("Authorization", "Basic " + btoa("test_user:test_user"));
headers.append("X-Requested-With", "XMLHttpRequest");
headers.append("withCredentials", "true");
//headers.append("Access-Control-Allow-Methods", "GET, HEAD, OPTIONS, POST, PUT, DELETE");
//headers.append("Access-Control-Allow-Origen", "*");

let options = new RequestOptions({headers: headers});
this.http.post("http://localhost:8085/myapi/api/services/login", 
               JSON.stringify({}), options);

春季安全

<sec:http auto-config="true" use-expressions="true" 
entry-point-ref="authenticationEntryPoint">
    <sec:form-login />
    <sec:http-basic />
    <sec:logout />
    <sec:intercept-url pattern="/**" access="permitAll" />
    <!-- corsHandler: filter (OncePerRequestFilter) that adds Access-Control-Allow-Origin header -->
    <sec:custom-filter ref="corsHandler" position="PRE_AUTH_FILTER"/>
    <sec:cors /> 
</sec:http>

web.xml

<filter>
    <filter-name>cross-origin</filter-name>
    <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
    <init-param>
        <param-name>allowedOrigins</param-name>
        <param-value>*</param-value>
    </init-param>
   <init-param>
       <param-name>allowedMethods</param-name>
       <param-value>GET,POST,OPTIONS,DELETE,PUT,HEAD</param-value>
   </init-param>
  <init-param>
       <param-name>allowedHeaders</param-name>
       <param-value>Origin,Content-Type,Accept,authorization,X-Requested-With</param-value>
   </init-param>
</filter>
<filter-mapping>
    <filter-name>cross-origin</filter-name>
    <url-pattern>*</url-pattern>
</filter-mapping>

Webpack服務器：

  devServer: {
    historyApiFallback: true,
    stats: 'minimal',
        headers: {
            'Access-Control-Allow-Origin': '*'
        } 
  }

有一些過濾器（servlet過濾器）和Spring攔截器設置來添加Access-Control-Allow-Origen標頭，但不會執行任何標頭。

Answer 1

最終的解決方案是在webpack開發服務器中創建代理

代理避免了CORS問題（代理：{...}）。 其余api的URL已更新到運行角度應用程序的同一台計算機上：this.http.post（“ http：// localhost ： 8081 / myapi / api / services / login”，...）：

Webpack代理：

devServer: {
    historyApiFallback: true,
    stats: 'minimal',
    headers: {
        'Access-Control-Allow-Origin': '*'
    },
    proxy: {
       '/myapi/api/**': {
            target: 'http://localhost:8085',
            secure: false              
        }
    }
}

在Angular中，需要針對其余映射方法進行帶有身份驗證標頭的HTTP調用。

@PostMapping("/login")
public ResponseEntity login() {
    return new ResponseEntity<>(HttpStatus.OK);
}

一旦CORS問題不存在，調用此rest方法（通過代理）似乎可以正常工作。

不明白為什么在這種情況下CORS配置無法正常工作：問題中上面給出的與CORS相關的大多數代碼對於該解決方案都是不必要的