CODEWITHSUNDEEP
reactjsnext.jscorsreact-querysanity
user3040230424
user3040230424

Reputation: 87

No 'Access-Control-Allow-Origin' header is present on the requested resource when fetching sanity data in client components next 13

I tried fetching data from Sanity in client component Next 13 using both a client fetching library and vanilla react. It shows this error:

Access to XMLHttpRequest at 'https://rc70arjs.api.sanity.io/v2021-10-21/data/query/production?query=*%5B_type+%3D%3D+%22user%22%5D' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is my client config:

const client = createClient({
   projectId: 'rc70arjs',
   dataset: 'production',
   apiVersion: '2021-10-21',
   useCdn: true
});

Upvotes: 0

Views: 520

Answers (1)

Dhaval Gajjar
Dhaval Gajjar

Reputation: 2960

Please add CORS configuration to sanity.

Via your management console

To add a CORS origin from your management console:

  1. Go to https://www.sanity.io/manage
  2. Pick your project from the list
  3. Go to Settings, and then to API settings
  4. Under CORS Origins, click the Add CORS origin button
  5. Enter your Origin (http://localhost:3000), select whether or not to Allow credentials, and click Save. If your origin was added successfully, it will appear at the top of your CORS origins list.

Via the command line interface

To add a CORS origin from the CLI:

  1. Navigate to your project's folder in your terminal
  2. Run the command sanity cors add [ORIGIN], where [ORIGIN] meets the requirements listed above
  3. When prompted, select whether or not to allow credentials

You can confirm your origin was added with the statement CORS origin added successfully or by consulting the list returned by the command sanity cors list.

More details at Sanity Docs

Upvotes: 1

Related Questions