ANGULAR 10 Keycloak 被 CORS 策略阻止

Question

我的應用程序位於 angular 10 中，並通過 httpclient 訪問 keycloak EndPoint 以訪問我的應用程序 angular 10 代碼。

const data = {
  'username': username,
  'password': password
};
return this.httpClient.post(environment.loginOAUth, data);

其中 environment.loginOAUth = keycloal 配置為：

• 客戶端協議：openid 連接
• 訪問類型：機密
• 有效的重定向 URI：myAppURL 和
• Web 來源：+

錯誤：

CORS 策略已阻止來自原點“myAppURL”：請求的資源上不存在“Access-Control-Allow-Origin”header。

我認為問題出在我的 angular 代碼中，因為我嘗試了互聯網評論中的任何內容。 你能和我打招呼嗎？ 先感謝您

Answer 1

問題不在您的 Angular 應用程序中。 要在 localhost 中解決它，您可以在 package.json "ng serve" 上使用此配置代理您的請求：

ng serve --proxy-config=proxy.conf.json

並且，在 proxy.conf.json 中將重定向放置到該域：

{
  "/auth": {
    "target": "http://keycloakcpath",
    "secure": true,
    "logLevel": "info",
    "changeOrigin": true
  }
}

來源： https://angular.io/guide/build#proxying-to-a-backend-server

Answer 2

我在前面的 Angular 10 和后面的 keycloak-angular 8.1.0/keycloak-js 12.0.4 和 Spring 啟動時遇到了同樣的問題。 嘗試將配置添加到您的后端。 就我而言，這有效：

import java.util.Date;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

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


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

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        if (!(request.getMethod().equalsIgnoreCase("OPTIONS"))) {
            try {
                chain.doFilter(req, res);
            } catch (Exception e) {
                e.printStackTrace();
            }
        } else {
            System.out.println("Pre-flight" + new Date().toString());
            response.setHeader("Access-Control-Allow-Methods", "POST,GET,DELETE");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "authorization, content-type," +
                "access-control-request-headers,access-control-request-method,accept,origin,authorization,x-requested-with");
            response.setStatus(HttpServletResponse.SC_OK);
        }

    }
}

原答案帖

另一個更簡單的

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class AppConfiguration implements WebMvcConfigurer {

    @Value("${server.frontendUrl}")
    protected String frontendUrl;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins(frontendUrl.split(",")).allowedMethods("GET", "POST", "PUT", "DELETE");
    }
}

其中server.frontendUrl值http://localhost:4200在 application.properties 中定義