Sitecore JSS GraphQL CORS Error On Request

Question

While running my react based JSS app, I am getting an exception related to CORS. Below is the request. I am passing the sc_apikey and in the API key item cors, origin and Allowed Controllers fields have value *.

The Sitecore instance is based on SXA Headless Site and the version is 10.2

Access to XMLHttpRequest at
'https://<host_name>/sitecore/api/graph/items/master?sc_apikey={9000843D-7E49-4B85-9596-F24D671AE268}'
from origin 'http://localhost:3000' has been blocked by CORS policy:
Request header field sc_apikey is not allowed by
Access-Control-Allow-Headers in preflight response.

GraphQL is working which I verified from GraphQL UI.

https://<host_name>/sitecore/api/graph/items/master/ui

Answer 1

Configuring CORS Sitecore provides CORS support for Web API services. It applies to all custom Web API services as well as the ones provided by Sitecore (for example the Item Service and the OData Item Service).

You can configure CORS in three ways:

1. Globally for all Web API services (configured in the Sitecore.Services.Client.config file).

2. Using an API key.

3. Using the EnableCors attribute.

Global configuration The Sitecore.Services.Client.config file has a section called allowedOrigins. You register origins in this section. You do not have to provide an API key in requests to enable CORS, but origins that are registered via an API key or the EnableCors attribute take precedence over the ones that registered globally.

You add allowed origins similar to this:

Copy

<allowedOrigins hint="list:AddOrigin">
    <origin>http://example.com</origin>  
    <origin>http://localhost:39467</origin>  
</allowedOrigins>

Using an API key If you configure a service to use an API key, Sitecore resolves the allowed origins from this key, provided in the request.

You specify the allowed origins in the CORS Origins field of an API key item.

Note The OData Item Service is configured to use API keys and can get allowed origins from them.

Using the EnableCors attribute You can enable CORS by adding the EnableCors attribute (from the System.Web.Http.Cors namespace) to a controller class and specifying the origins, headers, and methods parameters as needed.

For example, this controller has wildcard values for all of the resource restriction parameters:

Copy

[ServicesController][EnableCors(origins: "*", headers: "*", methods: "*")]public class TestController : ServicesApiController { ... }

In production environments, you must use a more restrictive definition of what can access resources.

More information can be found in Documentation.

Answer 2

I was integrating 3rd party App with my Sitecore and I resolved the CORS by adding this in my webconfig

<?xml version="1.0" encoding="utf-8"?> 
  <configuration>   
    <system.webServer>
     <cors enabled="true">
       <add origin="https://frontendabc.sitecore.local">
         <allowMethods>
             <add method="GET" />
             <add method="HEAD" />
         </allowMethods>
       </add>
       <add origin="https://frontendxyz.sitecore.local">
         <allowMethods>
             <add method="GET" />
             <add method="HEAD" />
             <add method="POST" />
             <add method="PUT" /> 
             <add method="DELETE" />         
         </allowMethods>
       </add>
     </cors>   
  </system.webServer> 
</configuration>

P.S. you can add origin="*"

For more https://darjimaulik.wordpress.com/2021/01/26/cors-error-in-sitecore-jss/

Answer 3

This patched worked for me.

<?xml version="1.0" encoding="utf-8" ?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <api>
      <services>
        <configuration>
          <allowedOrigins>
            <origin>http://localhost:3000</origin>
          </allowedOrigins>
        </configuration>
      </services>
    </api>
  </sitecore>
</configuration>