# CORS error with nextjs-shopify sample

**URL:** https://forum.builder.io/t/cors-error-with-nextjs-shopify-sample/3289
**Category:** Technical Questions
**Tags:** shopify, nextjs
**Created:** [February 23, 2023, 4:37pm UTC](https://forum.builder.io/t/cors-error-with-nextjs-shopify-sample/3289 "2023-02-23T16:37:40Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![jflottawa](https://avatars.discourse-cdn.com/v4/letter/j/c89c15/32.png) [@jflottawa](https://forum.builder.io/u/jflottawa)
#### Post date: [February 23, 2023, 4:37pm UTC](https://forum.builder.io/t/cors-error-with-nextjs-shopify-sample/3289/1 "2023-02-23T16:37:40Z")

</div>

**Builder content link**  
[Generic template | Visual Editor | Builder.io](https://builder.io/content/e5184925f1567ab9d249c259ed26fc3aa5b798173a41a390b7b244573d61e368)

public api key **e9da8b4ec1994cafb66f28c23b884c5c**

**What are you trying to accomplish**  
Trying to preview product pages using the nextjs-shopify sample. I haven’t made any changes to the /pages/product/[handle].tsx page. I’ve tried proxying, not proxying, using localhost:3000 (which runs fine) as well as using the live site for preview.

In all / many cases I’m getting the CORS blocked message in the console.  
` ... 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.`

The error is in `plugin-shopify`.

**Code stack you are integrating Builder with**  
[NextJS + Shopify sample](https://github.com/BuilderIO/nextjs-shopify)

Thanks in advance!

---

<div class="post-metadata">

### Author: ![anon43891756](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@anon43891756](https://forum.builder.io/u/anon43891756)
#### Post date: [February 24, 2023, 2:13pm UTC](https://forum.builder.io/t/cors-error-with-nextjs-shopify-sample/3289/2 "2023-02-24T14:13:17Z")

</div>

Hi @jflottawa, Welcome to [Builder.io](http://Builder.io) Forum!

To resolve this console error you want to make sure to set up content security policy headers to allow your site to be iframed by [Builder.io](http://builder.io/) similar to this line [BuilderIO/nextjs-shopify](https://github.com/BuilderIO/nextjs-shopify/blob/9ae21086f848fcf019237b01ebb794f691c88f37/next.config.js#L14)

Let us know if this doesn’t solve your issue!

---

<div class="post-metadata">

### Author: ![jflottawa](https://avatars.discourse-cdn.com/v4/letter/j/c89c15/32.png) [@jflottawa](https://forum.builder.io/u/jflottawa)
#### Post date: [February 24, 2023, 2:26pm UTC](https://forum.builder.io/t/cors-error-with-nextjs-shopify-sample/3289/3 "2023-02-24T14:26:12Z")

</div>

Hey @anon43891756,

I’m actually using nextjs-shopify sample, this is a snippet of my next.config.js:

```auto
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Content-Security-Policy',
            value:
              'frame-ancestors https://*.builder.io https://builder.io http://localhost:3000',
          }
        ],
      },
    ]
  },

```

The weird thing is the error is coming between [builder.io](http://builder.io) and [cdn.builder.io](http://cdn.builder.io) ?

Detailed error:

```auto
    Access to fetch at 'https://cdn.builder.io/api/v1/shopify/storefront/product/gid://shopify/Product/8132652663105?apiKey=e9da8b4ec1994cafb66f28c23b884c5c&pluginId=@builder.io/plugin-shopify' from origin 'https://builder.io' 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.

```

---

<div class="post-metadata">

### Author: ![jflottawa](https://avatars.discourse-cdn.com/v4/letter/j/c89c15/32.png) [@jflottawa](https://forum.builder.io/u/jflottawa)
#### Post date: [February 25, 2023, 2:46am UTC](https://forum.builder.io/t/cors-error-with-nextjs-shopify-sample/3289/4 "2023-02-25T02:46:44Z")

</div>

Seems like the issue is specifically centered around the @builder.io/plugin-shopify ?

---

<div class="post-metadata">

### Author: ![jflottawa](https://avatars.discourse-cdn.com/v4/letter/j/c89c15/32.png) [@jflottawa](https://forum.builder.io/u/jflottawa)
#### Post date: [February 25, 2023, 3:13am UTC](https://forum.builder.io/t/cors-error-with-nextjs-shopify-sample/3289/5 "2023-02-25T03:13:01Z")

</div>

Continuing on this investigation… Why would I get an 301 response (permanently moved) for :

[https://cdn.builder.io/api/v1/shopify/storefront/product/gid://shopify/Product/8132439179585?apiKey=4f2948b6333649358109688b99f72c00&pluginId=@builder.io/plugin-shopify](https://cdn.builder.io/api/v1/shopify/storefront/product/gid://shopify/Product/8132439179585?apiKey=4f2948b6333649358109688b99f72c00&pluginId=@builder.io/plugin-shopify)

Is this a red herring? Should I still focus on the error prior to this one?

Access to fetch at ‘[https://cdn.builder.io/api/v1/shopify/storefront/product/gid://shopify/Product/8132439179585?apiKey=4f2948b6333649358109688b99f72c00&pluginId=@builder.io/plugin-shopify](https://cdn.builder.io/api/v1/shopify/storefront/product/gid://shopify/Product/8132439179585?apiKey=4f2948b6333649358109688b99f72c00&pluginId=@builder.io/plugin-shopify)’ from origin ‘[https://builder.io](https://builder.io)’ 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.

---

<div class="post-metadata">

### Author: ![matheusnogueira](https://avatars.discourse-cdn.com/v4/letter/m/5f8ce5/32.png) [@matheusnogueira](https://forum.builder.io/u/matheusnogueira)
#### Post date: [February 26, 2023, 11:15pm UTC](https://forum.builder.io/t/cors-error-with-nextjs-shopify-sample/3289/6 "2023-02-26T23:15:40Z")

</div>

Hi @jflottawa, how are you?  
I’m new here. Just exploring.  
Did you already insert your test url in [builder.io](http://builder.io), just like we see in [YouTube](https://www.youtube.com/embed/uIHqPu2t1O0?start=525)? I dont have shopify account to test it, but soon i will try and then came here again.

---

<div class="post-metadata">

### Author: ![jflottawa](https://avatars.discourse-cdn.com/v4/letter/j/c89c15/32.png) [@jflottawa](https://forum.builder.io/u/jflottawa)
#### Post date: [February 27, 2023, 12:51pm UTC](https://forum.builder.io/t/cors-error-with-nextjs-shopify-sample/3289/7 "2023-02-27T12:51:31Z")

</div>

Yeah I’ve got the site url set to localhost:3000, I’ve also tried to set it to a live site. The video is a bit dated compared to the current code structure but I still watched it.

I’m wondering if something also could have changed in Builder’s plugin-shopify which causes this issue.

---

<div class="post-metadata">

### Author: ![matheusnogueira](https://avatars.discourse-cdn.com/v4/letter/m/5f8ce5/32.png) [@matheusnogueira](https://forum.builder.io/u/matheusnogueira)
#### Post date: [February 27, 2023, 2:29pm UTC](https://forum.builder.io/t/cors-error-with-nextjs-shopify-sample/3289/8 "2023-02-27T14:29:13Z")

</div>

I think that someone only can help you, if you share more information, like your github repo. Soon, i will try too. And then i let you know.

---

<div class="post-metadata">

### Author: ![jflottawa](https://avatars.discourse-cdn.com/v4/letter/j/c89c15/32.png) [@jflottawa](https://forum.builder.io/u/jflottawa)
#### Post date: [February 27, 2023, 5:39pm UTC](https://forum.builder.io/t/cors-error-with-nextjs-shopify-sample/3289/9 "2023-02-27T17:39:41Z")

</div>

Hey @matheusnogueira, I understand but the repo is private because of Shopify API keys, etc.

I used the nextjs-shopify repo with no modifications except for the keys, so it should be pretty easy to replicate for anyone who has Shopify.

I can’t get the “Generic template” section to load in preview mode due to the CORS issue listed above.

---

<div class="post-metadata">

### Author: ![matheusnogueira](https://avatars.discourse-cdn.com/v4/letter/m/5f8ce5/32.png) [@matheusnogueira](https://forum.builder.io/u/matheusnogueira)
#### Post date: [February 27, 2023, 5:48pm UTC](https://forum.builder.io/t/cors-error-with-nextjs-shopify-sample/3289/10 "2023-02-27T17:48:02Z")

</div>

Ok, no problem. When i try to use on my own shopify store, i will tell you. Maybe before someone from support help you here

---

<div class="post-metadata">

### Author: ![jflottawa](https://avatars.discourse-cdn.com/v4/letter/j/c89c15/32.png) [@jflottawa](https://forum.builder.io/u/jflottawa)
#### Post date: [February 27, 2023, 6:41pm UTC](https://forum.builder.io/t/cors-error-with-nextjs-shopify-sample/3289/11 "2023-02-27T18:41:47Z")

</div>

That would be great. I’m so early in the process that this whole ordeal is making me evaluate BigCommerce which offers multi-storefront feature. I’ve got a lot of work (and some money) already invested in Shopify so hopefully someone can help me figure out either what I’m doing wrong OR that that there is something wrong with the plugin-shopify.

---

<div class="post-metadata">

### Author: ![matheusnogueira](https://avatars.discourse-cdn.com/v4/letter/m/5f8ce5/32.png) [@matheusnogueira](https://forum.builder.io/u/matheusnogueira)
#### Post date: [March 2, 2023, 3:05pm UTC](https://forum.builder.io/t/cors-error-with-nextjs-shopify-sample/3289/12 "2023-03-02T15:05:59Z")

</div>

I haven’t used bigcommerce yet. I already worked in some projects with Shopify, Vtex and E-Com Plus. At Vtex you need an expensive budget. Shopify you can start low, like E-Com Plus. But the last one is focus in Brazil yet, but already have some integrations for us too. Sometime ago, i was speaking with someone there and he told me that they want to integrate with builderio, at the time, i didnt know, so i started to look more. And builderio is awesome. I just need more time to learn. I think this month i will have some time to study, maybe i can help with your cors problem.

---

<div class="post-metadata">

### Author: ![jflottawa](https://avatars.discourse-cdn.com/v4/letter/j/c89c15/32.png) [@jflottawa](https://forum.builder.io/u/jflottawa)
#### Post date: [March 2, 2023, 3:08pm UTC](https://forum.builder.io/t/cors-error-with-nextjs-shopify-sample/3289/13 "2023-03-02T15:08:20Z")

</div>

Turns out the issues I’ve reported are bugs. The [Builder.IO](http://Builder.IO) team is working on fixing them. Hopefully this unblocks me from building something really nice. It’s hard sometimes to debug what you think is your implementation issue only to find out it’s a product/API bug 🙂

---

<div class="post-metadata">

### Author: ![divbuilderio](https://avatars.discourse-cdn.com/v4/letter/d/8dc957/32.png) [@divbuilderio](https://forum.builder.io/u/divbuilderio)
#### Post date: [June 26, 2023, 7:16am UTC](https://forum.builder.io/t/cors-error-with-nextjs-shopify-sample/3289/14 "2023-06-26T07:16:14Z")

</div>

Hello matheusnogueira,  
I want to connect my [builder.io](http://builder.io) account with vtex, for that i’ve write builder page in my vtex react code but after putting my vtex host in model it is not connecting and even vtex page also giving me error.  
Can you please let me know how to fix this issue. Or can you refer me to someone who know about this
