Click here for full instructions on how to setup a site using
CORS.
This guide explains how to configure CORS in IIS to load React content from an API. We'll cover setting up rewrite outbound rules to handle requests from the provided example scripts.
Host your API on IIS under a domain, for example: client-api.clarityclient.com. Place your React application files, such as cef-store-main.js and cef-store-vendors.js, in the appropriate directories:
/DesktopModules/ClarityEcommerce/Shop/cef-store-main.js
/DesktopModules/ClarityEcommerce/Shop/cef-store-vendors.js
To manage rewrite rules in IIS, you need to install the URL Rewrite Module. Download it from the official website and follow the installation instructions.
To set up CORS in IIS, follow these steps:
Access-Control-Allow-Origin Value: * (or specify the allowed domains)Access-Control-Allow-Methods Value: GET, POST, PUT, DELETE, OPTIONSAccess-Control-Allow-Headers Value: Content-Type, Authorization, X-Requested-WithCORS Outbound Rule<none>Server VariableRESPONSE_Access-Control-Allow-Origin* (or specify the allowed domains)(.*)Rewrite{R:1}Repeat this process for the other Access-Control-Allow-* headers.
Test the CORS configuration by making requests from a different domain to load the React content. Verify that the content is loaded and the API requests are successful.
To whitelist specific origins for your API, add the following configuration to your appSettings.Environment.json file:
{
...
"Clarity.API.Requests.OriginsWhiteList": [
"https://react-dnn9.clarityclient.com",
"http://react-dnn9.clarityclient.com"
],
...
}
You have now configured CORS in IIS to load React content from an API and set up rewrite outbound rules to handle requests from the provided example scripts.