Unable to fetch blogs because of cors policy

I created a ghost blog samson.ghost.io .

In my laptop, I am running a simple react app on localhost:9000, and I need to fetch blogs the ghost blog.

I have installed @tryghost/content-api via npm and I have the content API key
and I using the sample code as:

const api = new GhostContentAPI({
  url: 'https://samson.ghost.io',
  key: 'my-content-api-key',
  version: "v3"
});


api.posts
    .browse({limit: 5, include: 'tags,authors'})
    .then((posts) => {
        posts.forEach((post) => {
            console.log(post.title);
        });
    })
    .catch((err) => {
        console.error(err);
    });

But this is giving me the cors error:

Access to XMLHttpRequest at …url… from origin 'http://localhost:9000 has been blocked by CORS policy, no ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I have tried the answers provided here:


but modifying webpack doesn’t change anything.

How do I solve this?

Anyone? I can’t get it to work

Hey there @_samayo. Cool to see you playing around with the Ghost Content API. Are you trying to use the API with a front-end React component? You might want to look into using something like Create React App (https://create-react-app.dev/) that comes bundled with a few things include how to avoid CORS issues:
https://create-react-app.dev/docs/proxying-api-requests-in-development/

I’d recommend this if you’re not super familiar with React, either that or you can look into tools like Axios to help you retrieve content from the Ghost API. There’s a pretty good tutorial here https://alligator.io/react/axios-react/

Hope this helps! :slightly_smiling_face:

@_samayo I’m not sure what’s happening here because Ghost definitely returns the correct access-control-allow-origin header for Content API requests so that any host is allowed to connect. Here’s an example:

➜ curl -H 'Origin: http://localhost:9000' -I https://demo.ghost.io/ghost/api/v3/content/posts/\?limit\=5\&include\=tags,authors\&token\=4fef5f91af9b42d01461e19b3c | grep access-control-allow-origin

access-control-allow-origin: *

Are you able to post a screenshot of the error message in your browser console?