1

I am working on an Angular(v13) project that it's backend is Java and web servers are Tomcat and Nginx. My project is on localhost but the APIs are on another address(DNS). When I run the ng serve command, I see this error on the browser console panel:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://X.com/club/v1/vPersonLevelService/vPersonLevelDashboard. (Reason: header ‘access-control-allow-headers’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).

My service.ts code is here:

import { Inject, Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { APP_CONFIG, IAppConfig } from '../club/core/app.config';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class NewsService {

  constructor(@Inject(APP_CONFIG) private appConfig: IAppConfig, private http: HttpClient) { }

    GetPersonLevel(){
    let header = new HttpHeaders()

    const corsHeaders = {
      'observe': 'response',
      'Access-Control-Allow-Headers': 'Content-Type,
      'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS',
      'Access-Control-Allow-Origin': '*'
    }

    return this.http.get('https://X.com/club/v1/vPersonLevelService/vPersonLevelDashboard',{ headers: corsHeaders}).pipe( map( (res: any) => { return res; }) );
  }

}

Can anyone help me to solve this error?

MonaK
  • 65
  • 6
  • CORS headers must be set on the server, not on the client. – Guy Incognito May 14 '23 at 11:55
  • The *server* that has the data needs to grant permission (by adding `Access-Control` headers to the **response**) to the JavaScript that wants to read the data. You've done it the other way around, which doesn't make sense. – Quentin May 14 '23 at 11:55
  • @Quentin Thank you for your reply. I have set the `Access-Control` in the header, but it does not work. Could you please help me how to set the header? – MonaK May 14 '23 at 12:05
  • @MonaK — I just told you that you should **not** set it in the header in the client-side code. I have no idea what programming language you wrote `x.com` in so I've no idea how you would change its code to add the header. – Quentin May 14 '23 at 12:05
  • @GuyIncognito Thank you for your reply. Could you please help me how to set the header on the server? – MonaK May 14 '23 at 12:06
  • @Quentin The server is written in Java. – MonaK May 14 '23 at 12:08
  • Then maybe you should ask a question about how to set CORS headers for whatever Java framework you are using to build the website (making sure you include a [mcve] and search for a tutorial about it before trying to crowdsource the answer). – Quentin May 14 '23 at 12:10
  • https://www.google.com/search?q=how+to+set+cors+headers+in+java If you use something like Spring Boot then add that to the search query. If you can't figure it out from that then post a new question. – Guy Incognito May 14 '23 at 12:11

0 Answers0