builder component from @builder.io/react doesnt’work when I try to make a request, It’s returning CORS errors. It’s working just when I use axios.
example code:
const getArticles = async () =\> {
try {
const response = await axios.get(`https://cdn.builder.io/api/v3/content/page-article?apiKey=${process.env.NEXT_PUBLIC_BUILDER_API_KEY}&query.data.title.$options=i&&query.data.title.$regex=.*${searchTerm}.*&limit=20&omit=data.blocks`);
```
setSearchResults(response);
} catch (error) {
console.error('Error:', error);
throw error;
}
};
```
---
No, Actually when I’m using the builder component, for example:
import { builder } from ‘@builder.io/react’;
builder.get(`https://cdn.builder.io/api/v3/content/pible-page-article?apiKey=${process.env.NEXT_PUBLIC_BUILDER_API_KEY}&query.data.title.$options=i&&query.data.title.$regex=.*${searchTerm}.*&limit=20&omit=data.blocks`)
---
useEffect(() =\> {
const getArticles = async () =\> {
try {
const response = await axios.get(`https://cdn.builder.io/api/v3/content/pible-page-article?apiKey=${process.env.NEXT_PUBLIC_BUILDER_API_KEY}&query.data.title.$options=i&&query.data.title.$regex=.*${searchTerm}.*&limit=20&omit=data.blocks`);
```
setSearchResults(response.data.results);
} catch (error) {
console.error('Error:', error);
throw error;
}
};
```
}, [searchTerm]);
using axios it’s ok but if use import { builder } from ‘@builder.io/react’; so I receive CORS error
the only diference is instead of use axios.get(‘…’) I trying to use builder.get(‘…’)
---
Hello @Luiz,
When using the builder SDK, your code would look like the below
```auto
useEffect(() => {
builder
.get("page-article", {
limit: 100,
query: {
'data': {
"$or": [
{
"title": { "$eq": "Qwik Blog" }
},
{
"title": { "$eq": "Partytown blog" }
}
]
}
}
})
.toPromise()
.then((announcementBar) => setAnnouncement(announcementBar));
}, []);
```
You should not be using the endpoint like the following `https://cdn.builder.io/api/v3/content/pible-page-article?apiKey=${process.env.NEXT_PUBLIC_BUILDER_API_KEY}&query.data.title.$options=i&&query.data.title.$regex=.*${searchTerm}.*&limit=20&omit=data.blocks)`
> [@REST API query $or doesnt seem to properly work](https://forum.builder.io/t/rest-api-query-or-doesnt-seem-to-properly-work/4835/4):
>
> Hello @djkenneth, Here is an example that is working for us const articles = await builder.getAll('blog-article', { // Include references, like the `author` ref options: { includeRefs: true }, limit: articlesPerPage, query: { 'data': { "$or": [{ "title": { "$eq": "Qwik Blog" } }, { "title": { "$eq": "Partytown blog" } }] } } })
> [@Fulltext search in custom fields](https://forum.builder.io/t/fulltext-search-in-custom-fields/157/2):
>
> Hey @aubergine - try leaving out the \*'s, e.g. query.data.myCustomField.$regex="searchText" E.g. you can query all of our docs that have the text “Builder” in them with this [https://cdn.builder.io/api/v2/content/docs-content?apiKey=YJIGb4i01jvw0SRdL5Bt&query.data.title.$regex="Builder"&fields=name](https://cdn.builder.io/api/v2/content/docs-content?apiKey=YJIGb4i01jvw0SRdL5Bt&query.data.title.%24regex=%22Builder%22&fields=name) You can make this a little nicer too by making the search case insensitive by also adding query.data.myCustomField.$options=i [https://cdn.builder.io/api/v2/content/docs-content?apiKey=YJIGb4i01jvw…](https://cdn.builder.io/api/v2/content/docs-content?apiKey=YJIGb4i01jvw0SRdL5Bt&query.data.title.%24regex=%22Builder%22&fields=name&query.data.title.%24options=i)
---
In the first moment I tryed to use this way, exactly like your example @manish-sharma but I always received CORS error in localhost so I tried to use cdn link with axios to see if it will work.
---
Hello @Luiz,
Can you make sure, you are using the correct API key and call to fetch the data, I tried below and had no issue
```auto
useEffect(() => {
async function fetchContent() {
const content = await builder
.get("pible-page-article", {
url: window.location.pathname
})
.promise();
setContent(content);
setNotFound(!content);
// if the page title is found,
// set the document title
if (content?.data.title) {
document.title = content.data.title
}
}
fetchContent();
}, [window.location.pathname]);
```
Additionally, are you using next js or react?
---
Hello @Luiz,
Yes, I did try using localhost and if you are using next js you can try below
```auto
import { builder, BuilderComponent } from '@builder.io/react'
builder.init('c62b6400b6304daabf5f25c1107e9986')
export const getStaticProps = async (context) => {
// Dynamically fetch latest content from Builder.io API
const content = await builder.get('pible-page-article', { url: context.resolvedUrl });
return { props: { content } }
}
// View full integration and docs: https://builder.io/c/docs/developers
export default function MyComponent(props) {
return
}
```
> **[Developer Quickstart - Builder.io](https://www.builder.io/c/docs/quickstart)**
>
> Quickly integrate Builder.io with your application for streamlined Page building with this developer Quickstart.
---
Hello @Luiz,
Can you try the below method
> **[Registering Custom Components - Builder.io](https://www.builder.io/c/docs/custom-components-setup#fetching-data-async)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.
Additionally, try using CORS plugins [https://chromewebstore.google.com/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf](https://chromewebstore.google.com/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf)
---
My Component is already registered and this extension didn’t work
I need to make a request to search in client side, I need to fetch some articles using a search input for example
---
Hello @Luiz,
I’m not able to reproduce the issue on my end, please refer to the loom recording below
[Next page](https://forum.builder.io/t/cors-error-builder-component-from-builder-io-react-in-localhost/4836.md?page=2)