I have developed an Ionic application that connects to an API website. To safeguard my website, I integrated CloudFlare for added protection. Prior to activating the Under Attack Mode, the requests were being successfully sent without any errors. However, after enabling this mode, an error is now displayed in the console:
Access to XMLHttpRequest at 'https://mywebsite.org/api/mobile/news?pageSize=15¤tPage=1&language=undefined' from origin 'http://localhost:8100' 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.
The backend of the app is a Flask microservice and I have configured the CORS settings as follows:
cors.init_app(app, resources={r"https://mywebsite.org/api/*": {"origins": "https://mywebsite.org"}})Whenever a get request is sent from the application, I include Access-Control-Allow-Origin in the headers:
let headers = new HttpHeaders({
"Access-Control-Allow-Origin":"https://mywebsite.org/",
"origin":"https://mywebsite.org/"
});
@Injectable({
providedIn: 'root'
})
export class DataApiService {
private apiUrl: string = 'https://mywebsite.org/api';
constructor(
private http: HttpClient,
private translate: TranslateService
) { }
// Get news
apiRequest(url: string, params?:any){
const apiUri = `${this.apiUrl+url}`;
if(params){
params.language = this.translate.getDefaultLang();
}
return this.http.get(apiUri, { headers: headers, params: params }).pipe(
delay(
500
),
map(
(res:any) => {
return res
}
)
)
}
}
If anyone could provide assistance, it would be greatly appreciated.