CORS error with nextjs-shopify sample

Technical Questions
,
1

Builder content link
Generic template | Visual Editor | Builder.io

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

Thanks in advance!

2

Hi @jflottawa, Welcome to 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 similar to this line BuilderIO/nextjs-shopify

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

3

Hey @garima,

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

  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 and cdn.builder.io ?

Detailed error:

    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.
4

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

5

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

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’ 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.

6

Hi @jflottawa, how are you?
I’m new here. Just exploring.
Did you already insert your test url in builder.io, just like we see in YouTube? I dont have shopify account to test it, but soon i will try and then came here again.

7

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.

8

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.

9

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.

10

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

11

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.

12

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.

1 Like
13

Turns out the issues I’ve reported are bugs. The 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 :slight_smile:

1 Like
14

Hello matheusnogueira,
I want to connect my 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