# CORS error builder component from @builder.io/react in localhost

**URL:** https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836
**Category:** Technical Questions
**Created:** [January 22, 2024, 4:19pm UTC](https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836 "2024-01-22T16:19:51Z")
**Posts on this page:** 13
**Page:** 2

<div class="post-metadata">

### Author: ![Luiz](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Luiz](https://forum.builder.io/u/Luiz)
#### Post date: [January 25, 2024, 3:37pm UTC](https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836/22 "2024-01-25T15:37:10Z")

</div>

I recorded a video, but I couldn’t find a way to send it to you

---

<div class="post-metadata">

### Author: ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [January 25, 2024, 3:47pm UTC](https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836/23 "2024-01-25T15:47:03Z")

</div>

Hello @Luiz,

Please raise a support ticket with the video attachment and send it to [support@builder.io](mailto:support@builder.io).

---

<div class="post-metadata">

### Author: ![Luiz](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Luiz](https://forum.builder.io/u/Luiz)
#### Post date: [January 25, 2024, 4:05pm UTC](https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836/24 "2024-01-25T16:05:38Z")

</div>

Hello @manish-sharma

Sent.

---

<div class="post-metadata">

### Author: ![Luiz](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Luiz](https://forum.builder.io/u/Luiz)
#### Post date: [January 25, 2024, 8:04pm UTC](https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836/25 "2024-01-25T20:04:40Z")

</div>

I sent the video, did you watch?

---

<div class="post-metadata">

### Author: ![Luiz](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Luiz](https://forum.builder.io/u/Luiz)
#### Post date: [January 29, 2024, 10:59am UTC](https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836/26 "2024-01-29T10:59:21Z")

</div>

Hello @manish-sharma

I sent the video, did you watch?

---

<div class="post-metadata">

### Author: ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [January 29, 2024, 11:01am UTC](https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836/27 "2024-01-29T11:01:47Z")

</div>

Hi @Luiz,

I did watch the video, and currently working on reproducing it.

---

<div class="post-metadata">

### Author: ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [January 29, 2024, 12:45pm UTC](https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836/28 "2024-01-29T12:45:24Z")

</div>

Hello @Luiz,

We have been unable to reproduce this issue on our end. Please review the implementation of the blog article search functionality outlined below:

```auto
import React, { useState, useEffect } from 'react';
import { builder, BuilderComponent } from '@builder.io/react';
import { Link } from '@components/Link/Link';
import { Input } from 'theme-ui';

builder.init('API KEY');

const articlesPerPage = 10;

function Blog({ articles }) {
  const [blogItems, setBlogItems] = useState(articles);
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    const delayDebounceFn = setTimeout(() => {
      searchBlog(searchTerm);
    }, 500);

    return () => clearTimeout(delayDebounceFn);
  }, [searchTerm]);

  const searchBlog = async (searchText) => {
    const searchResults = await search(searchText);
    setBlogItems(searchResults);
  };

  const search = (searchString) =>
    builder.getAll('blog-article', {
      query: {
        $or: [
          {
            'data.description': {
              $regex: `${searchString}`,
              $options: 'i',
            },
          },
          {
            'data.title': {
              $regex: `${searchString}`,
              $options: 'i',
            },
          },
        ],
      },
    });

  const handleInputChange = (e) => {
    setSearchTerm(e.target.value);
  };

  return (
    <>
      <div style={{ fontSize: '32px', textAlign: 'center' }}>
        <Input defaultValue="" onChange={handleInputChange} />
      </div>

      <BuilderComponent
        key={JSON.stringify(blogItems)} // add key prop
        name="page"
        content={blogItems}
        options={{ includeRefs: true }}
      />
      <div
        style={{
          display: 'flex',
          gap: '2rem',
          marginTop: '20px',
          alignItems: 'center',
          justifyContent: 'center',
          flexWrap: 'wrap',
          maxWidth: '800px',
        }}
      >
        {blogItems.map((item, index) => (
          <div style={{ display: 'flex', color: '#fff', flexWrap: 'wrap' }} key={index}>
            <Link href={`/blog/${item?.data?.handle}`}>
              <div style={{ cursor: 'pointer', overflow: 'hidden', width: 200 }}>
                <div style={{ width: 200, height: 100, display: 'block' }}>
                  <img src={item?.data?.image} alt={item?.data?.title} />{' '}
                  {/* add alt text */}
                </div>
                {item?.data?.title}
              </div>
            </Link>
          </div>
        ))}
      </div>
    </>
  );
}

export async function getStaticProps({ params }) {
  const articles = await builder.getAll('blog-article', {
    // Include references, like the `author` ref
    options: { includeRefs: true },
    limit: articlesPerPage,
  });

  return { props: { articles } };
}

export default Blog;

```

---

<div class="post-metadata">

### Author: ![Luiz](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Luiz](https://forum.builder.io/u/Luiz)
#### Post date: [January 30, 2024, 12:01pm UTC](https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836/29 "2024-01-30T12:01:24Z")

</div>

Does the project need any specific configuration other than apikey? why did I change the component according to your example but it still gives CORS error, this doesn’t make sense

---

<div class="post-metadata">

### Author: ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [January 30, 2024, 12:43pm UTC](https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836/30 "2024-01-30T12:43:19Z")

</div>

Hello @Luiz,

No there are no other configurations required apart from the API key. Check your `next.config.js` file, and make sure it includes content security policy header

e.g.

```auto
const bundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: !!process.env.BUNDLE_ANALYZE,
})

module.exports = bundleAnalyzer({
  target: 'serverless',
  images: {
    domains: ['res.cloudinary.com', 'cdn.builder.io', 'via.placeholder.com'],
  },
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Content-Security-Policy',
            value:
              'frame-ancestors https://*.builder.io https://builder.io http://localhost:1234',
          },
        ],
      },
    ]
  },
  env: {
    // expose env to the browser
    BUILDER_PUBLIC_KEY: process.env.BUILDER_PUBLIC_KEY,
    IS_DEMO: process.env.IS_DEMO,
  },
  i18n: {
    // These are all the locales you want to support in
    // your application
    locales: ['en-US'],
    // This is the default locale you want to be used when visiting
    // a non-locale prefixed path e.g. `/hello`
    defaultLocale: 'en-US',
  },
})

```

---

<div class="post-metadata">

### Author: ![Luiz](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Luiz](https://forum.builder.io/u/Luiz)
#### Post date: [January 30, 2024, 1:03pm UTC](https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836/31 "2024-01-30T13:03:09Z")

</div>

Yes, I included content security policy header

---

<div class="post-metadata">

### Author: ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [January 30, 2024, 1:25pm UTC](https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836/32 "2024-01-30T13:25:01Z")

</div>

Hello @Luiz,

If you’re still experiencing the issue, it might be related to something else, such as the browser or your app implementation. To assist you further, we’ll need a small reproducible case from your code base. A code sandbox would be much appreciated!

Feel free to share the code sandbox or any other relevant details, and we’ll do our best to help you resolve the issue.

---

<div class="post-metadata">

### Author: ![Luiz](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@Luiz](https://forum.builder.io/u/Luiz)
#### Post date: [February 1, 2024, 12:30pm UTC](https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836/33 "2024-02-01T12:30:48Z")

</div>

hey @manish-sharma

I solved the problem, it was because we are using sentry in our project and in the next.config.js we have this config

module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions);

The solution is can be this:

if(process.env.NODE\_ENV === ‘development’) {  
module.exports = nextConfig;  
} else {  
module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions);  
}

or add this line in sentry.client.config.js

tracePropagationTargets: [/^(?!._cdn.builder.io)._$/],

Thanks for your time and help.

---

<div class="post-metadata">

### Author: ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [February 1, 2024, 12:33pm UTC](https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836/34 "2024-02-01T12:33:00Z")

</div>

Hello @Luiz,

We are pleased to hear that. Thanks for sharing the solution!

[Previous page](https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836.md?page=1)