angular not sending correct header on request headers

Question

I'm new using angular, I'm trying to learn a little and I can't do a simple Get using a token. I researched a lot and always end up in this piece of code.

For my backend I am using a Kotlin / Springboot and have Cors configured.

Even so when trying to do this REQUEST I get this error.

export class AccountService {

  endpoint = 'http://localhost:5000/api-v1/account/list'

  constructor(private http: HttpClient) { }

  list() {
    const token = sessionStorage.getItem('token') // I'm getting the token correctly

    const headers = {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Access-Control-Allow-Headers': '*',
      'Authorization': token,
    }

    return this.http.get<any[]>(this.endpoint, { headers: headers })   } }

Access to XMLHttpRequest at 'http://localhost:5000/api-v1/account/list' from origin >'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass > access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

--

core.js:15713 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: > "http://localhost:5000/api-v1/account/list", ok: false, …} headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)} status: 0 statusText: "Unknown Error" url: "http://localhost:5000/api-v1/account/list" ok: false name: "HttpErrorResponse" message: "Http failure response for http://localhost:5000/api-v1/account/list: 0 Unknown Error" error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", > …} proto: HttpResponseBase

my Cors configuration in my server side

class CorsFilter : Filter {
    override fun init(p0: FilterConfig?) { TODO("not implemented") }

    override fun destroy() { TODO("not implemented") }

    override fun doFilter(servletRequest: ServletRequest, servletResponse: ServletResponse, filterChain: FilterChain) {
        val response = servletResponse as HttpServletResponse
        val request = servletRequest as HttpServletRequest

        response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200")
        response.setHeader("Access-Control-Allow-Methods", "GET,POST,DELETE,PUT,OPTIONS")
        response.setHeader("Access-Control-Allow-Headers", "Content-Type")
        response.setHeader("Access-Control-Allow-Credentials", true.toString())

        if ("OPTIONS".equals(request.method, ignoreCase = true)) {
            response.status = HttpServletResponse.SC_OK
        } else {
            filterChain.doFilter(servletRequest, servletResponse)
        }
    }
}

I really don't know if in Angular we should add anything else.

Angular CLI: 7.3.1
Node: 12.13.0
Angular: 7.2.4

Manit Manit · Accepted Answer · 2020-01-06T10:50:48

On your server side code can you change this line

   response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200")

to

    response.setHeader("Access-Control-Allow-Origin", "*")

that should work.

angular not sending correct header on request headers

1 Answers