How to Resolve 403 CORS Error for Image Display in Canvas Apps

This blog covers common causes, such as improper server configurations and restrictive CORS policies, and provides step-by-step solutions to fix the issue, ensuring seamless image loading and a better user experience.

A bug was detected in a Canvas app where images from a column of type "Image" in a Dataverse table were not displaying correctly. The error message encountered was,

403 CORS were not enabled, and no matching rule was found for this request.

This issue is related to the configuration of CORS (Cross-Origin Resource Sharing), which governs access permissions for resources across different domains.

Problem Details

We created a Canvas app with a gallery that uses a Dataverse table. This table includes a column of type "Image." However, as shown in image 2 below, the images do not display correctly within the gallery.

1. Dataverse table
   
2. Image 2: The image is not displaying in the gallery and if you launch the app you can see errors in the Browser Developer Tools.
   
   

Analysis and Root Cause

The 403 error occurs when the CORS configuration is not enabled or no matching rule exists for the request. In the context of Canvas apps using Dataverse, this means that images hosted on a different domain cannot be loaded properly by the app.

Solution. Configuring CORS in Power Apps Portals

To resolve this issue, the CORS configuration in Power Apps portals needs to be updated. This can be done using the Portal Management app by adding and configuring the appropriate site settings.

Here are the main steps.

Identify the Required Setting It was determined that a specific parameter must be added.

This parameter includes.

1. Name: Specifies the domain or origin to allow.
2. Value: Defines the CORS configuration details (e.g., allowed HTTP methods).
3. Description: Provides contextual information to aid future management.
   
4. Configure the Setting in Portal Management.
   
5. Validate the Configuration
6. Once the settings are added, it is crucial to test their effectiveness by reloading the Canvas app and verifying that the images display correctly.
   

Conclusion

This issue highlights the importance of proper CORS configuration in Power Apps portals to ensure smooth communication between resources hosted on different domains. With the addition of the identified parameter, images in the Canvas app can now display without any issues.