have problem with CORS Policy. Get an error:
Access to fetch at 'https://XXX.azurewebsites.net/api/protocols' from origin 'https://localhost:4321' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I removed custome headers but an error still occurs.
const httpClientOptions: IHttpClientOptions = {
headers: new Headers(),
method: "GET",
mode: "cors"
};
export default class ProtocolsWebPart extends BaseClientSideWebPart<IProtocolsWebPartProps> {
public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.protocols }">
<div class="${ styles.container }">
<div class="${ styles.row }">
<div class="${ styles.column }">
<div>${this.getJsonData()}</div>
</div>
</div>
</div>
</div>`;
}
public getJsonData = () => {
this.context.httpClient
.get('https://integroprotocolsapp.azurewebsites.net/api/protocols', HttpClient.configurations.v1, httpClientOptions)
.then((response: HttpClientResponse) : Promise<any> => {
console.log(response);
return response.json();
})
.then((response: any): void => {
console.log(response);
});
Do you have any idea how to avoid CORS Policy in this case?