1

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

1 Answer 1

0

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.

Sign up to request clarification or add additional context in comments.

2 Comments

did you restart the service after making the changes?
I would suggest if you can modify the description as it is not exactly a problem with angular. happy learning :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.