Question 97321 in Nginx Question posted in
The official documentation can be found here.

Why i have 200 with a CORS error in my Angular APP? – Nginx

I would like to call HTTP request with method GET to get an ID.
I call the request from Angular 14 and i take 200 response, but it’s red color.

Response for GET request

I have the response body, but Angular treats the response as false.

Content response for GET request

And i have this message in the navigator console.

Error message for GET request

Translate –> "Reason: CORS header ‘Access-Control-Allow-Origin’ does not match"

My server is in Springboot, this is my controller :

@CrossOrigin(origins = "*")
@GetMapping("/api/user/exist/{username}")
public long getMemberIdIfUserExist(@PathVariable final String username) {
    return accountService.getMemberIdIfUserExist(username);
}

And i add this in my security config: http.cors();

My Angular app is in docker container with Nginx:

FROM node:18.12.1-alpine3.16 AS build
WORKDIR /dist/src/app
RUN npm cache clean --force
COPY . .
RUN npm install
RUN npm run build --omit=dev
FROM nginx:1.23.2-alpine AS ngi
COPY --from=build /dist/src/app/dist/ng-app /usr/share/nginx/html
COPY /nginx-main.conf  /etc/nginx/nginx.conf
EXPOSE 80

The Angular call :

ifRegistred(facebookId: string): Observable<number> {
    console.error('function :: ifRegistred');
    let url = 'https://api.app.com/ws/api/user/exist/'+facebookId;
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })
    };
    
    return this.http.get<number>(url, httpOptions).pipe(
      tap(memberId => {
        console.error('function :: ifRegistred -> success');
      }),
      catchError((error) => {
        console.error('function :: ifRegistred -> failed');
        this.httpError(error);
        return of(0);
      })
    );
  }

And the traefik labels : (i am using v1.7)

- "traefik.frontend.headers.customResponseHeaders=Access-Control-Allow-Origin:*||Access-Control-Allow-Methods:GET,POST,OPTIONS||Access-Control-Allow-Headers:DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range||Access-Control-Expose-Headers:Content-Length,Content-Range"

I need help !

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Finally I found the error if it can help someone. Multiple origins comes from the backend. On SpringBoot, I removed the http.cors(); from SecurityConfig, and keep the annotation @CrossOrigin(origins = "*") at the controller


  2. 0

    The response says Access-Control-Allow-Origin: *, * which is not valid.

    You appear to have at least two different things attempting to set Access-Control-Allow-Origin: * and one of them is merging its attempt with the existing one to create a list of the existing value (*) and its own value (also *).

    The attempt to set it with Spring should be running first so I doubt that is the cause of the problem. The documentation for traefik says Custom headers will overwrite existing headers if they have identical names so it shouldn’t be that either.

    You might be trying to set it in a third place. Perhaps in one of your nginx configuration files.

    You need to search through your code base (including Docker configs and base images) and fix the duplicate attempts to set Access-Control-Allow-Origin (either by ensuring they are set to overwrite or by removing them).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search