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 }">

  public getJsonData = () => {
    .get('https://integroprotocolsapp.azurewebsites.net/api/protocols', HttpClient.configurations.v1, httpClientOptions)
    .then((response: HttpClientResponse) : Promise<any> => {
      return response.json();
    .then((response: any): void => {

Do you have any idea how to avoid CORS Policy in this case?

1 Answer 1


The webapp that you are trying to access should allow requests made by your web part. You need to check the CORS policy configured for the web app/API that you are trying to access and allow request from your SharePoint tenant URL.

enter image description here

  • Oh great. That's really help me. Thank you.
    – Maciej
    Sep 10, 2020 at 7:08

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.