CORS issue with Ghost Content API

Developer help
1

Hi I am using Angular Universal and my angular version is 15. I just setup a Ghost Pro (v5.0) account with the sole purpose of using the content API for my blog (not launched in production yet). The goal is to make http request from angular universal to ghost api to get the content and show them on my website.

My goal is to optimize my website for SEO by writing blogs using ghost pro CMS.

The problem is with CORS i.e whenever I make a request to the api

https://grocera.ghost.io/ghost/api/v3/content/posts/?key=[MY_KEY]&fields=slug,title,feature_image,excerpt&include=authors

I get a CORS issue because the domain I’m making request from (in this case http://localhost:4200) is not whitelisted on ghost server. SO the question is how can I whitelist domains to make an http request to ghost server ?

Is there some kind of admin dashboard ? Or code examples ?

To Recreate the problem:

You can simply setup a ghost account locally (with no changes). Setup an angular application and make and http request to the ghost server to load content.

2

You shouldn’t receive a CORS error when calling the Content API.

Are you able to share the code for how you’re calling the API? Or try calling the API from a simple JS file to help troubleshoot the error?

2 Likes
3

Sharing the exact CORS error message you are seeing and where you are seeing it could be helpful to.

When I make a request to my own Ghost Content API it includes this header in the reply:

Access-Control-Allow-Origin: *
Vary: Accept-Version, Accept-Encoding

From reading here: Access-Control-Allow-Origin - HTTP | MDN

This does indicate that requests from any origin should be allowed.

2 Likes
4

Found the solution.

After digging into the error I got in the chrome browser console. I found the following part of the message to be the key to understanding the problem.

The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard '’ when the request’s credentials mode is ‘include’.*

The request credentials mode was ‘include’ because I’ve set the “withCredentials” to true in my header parameters as shown here.

Setting it to false did the trick.