Fetch external url not working in developer mode

Developer help
1

I’m trying to do a fetch on my developing site.
But unfortunately I’m getting an error, while this code works on the live site which is in a docker image.

    const response = await fetch('https://mindglowing.art/api/gumroad', {
      mode: 'no-cors',
      method: 'get',
    });

    const data = await response.json();
    console.log(data);

I have changed my config.development.json so it’s not set to localhost as I’ve read that won’t be working when trying to fetch an external url.
I have used nginx to proxy my local ip to my domain.

{
  "url": "https://subdomain.mydomain.com/",
  "server": {
    "port": 2369,
    "host": "::"
  },
  "database": {
    "client": "sqlite3",
    "connection": {
      "filename": "/home/kenji/ghost-clean-dev/content/data/ghost-local.db"
    }
  },
  "mail": {
    "transport": "Direct"
  },
  "logging": {
    "transports": [
      "file",
      "stdout"
    ]
  },
  "process": "local",
  "paths": {
    "contentPath": "/home/kenji/ghost-clean-dev/content"
  }
}

In my production config of my live server I have this:

"process": "systemd",

But that won’t work in my development config.
I tried to look it up what other parameters there are, but couldn’t find it.
I tried to remove the process in the development config, the site still works, but the fetch still won’t work.

Any help is appreciated to make this work.

2

Can you share with us what exactly the error message is you receive?

Also, I am a bit confused about this: https://mindglowing.art/api/gumroad – are you sure that’s the correct URL?

3

Is this quote running on the server, or in the browser?

‘no-cors’ mode is usually not desirable as it blocks you from getting response data – which you probably wanted!

4 
gumroad.js:83 Error reading JSON: SyntaxError: Unexpected end of input (at gumroad.js:65:1)
    at readJSON (gumroad.js:65:1)

This is the error message. It cannot read the data as it’s not been fetched correctly.
You can go to the URL in your browser and you’ll find the data. I get the data using a nodejs application and store it as a json file on my site.
The error isn’t there when it’s loaded on the live site and the data is getting read correctly.

5

This code is running in a js file on my development site, on the server.
I’m running no-cors because otherwise it won’t fetch.

image
image1194×116 9 KB

6

I’m looking at your log image, and I don’t think you are running your javascript on the server, but rather in the user’s browser. (That looks a LOT like Chrome’s console log.)

If that’s the case, then your problem is that the browser is protecting you from bad actors by following the CORS policies set by the mindglowing.art server. You can’t fix that on the browser side, so you need to fix it on the server side. Do you control the server you’re fetching from, or have a good relationship with whoever owns it? If so, get it to return the right headers. If not, then you’re going to need to put a proxy of some sort between the user’s browser and that server, so that the browser makes the request of a server YOU control, that server makes a request to mindglowing.art (because servers don’t care about cors), then returns it to the user’s browser with the right headers set. (There are packages out there that do this - google it.)

Telling the browser to fetch in ‘no-cors’ mode is not usually the solution, because it means you don’t get the response body.

2 Likes
7

Okay, I guess I misunderstood your question then, sorry about that.
However, I own mindglowing.art and that site is running on my server (ghost docker). I do also run a local ghost development on that same server and I have proxied this to ghost-dev.mindglowing.art. So they are both on the same domain, on the same server (linux).
I’m executing the code in a js file in my theme asset folder and then run it through the browser. It is chrome’s console log indeed where I’m trying to read the JSON file.
Am I getting these errors because I’m on a subdomain or shouldn’t that matter?
So this also has nothing to do with running in development mode instead of production?

8

A subdomain is considered a different origin in this context. You’ll need to either change how you’re serving the JSON (how are you doing that btw?) or set up a proxy or other server to handle the request.

1 Like
9

Okay I didn’t know that, thank you I fixed it now.
So basically I have a nodejs app running in a docker container which outputs a the api from gumroad being in json format.
I then proxy that nodejs container to /api/gumroad on my site.
So what I did now is proxy that nodejs container to location /api/gumroad on my ghost-dev subdomain and changed the fetch to /api/gumroad which is working.

I have also removed the no-cors and everything is working fine now.
Thanks for the help guys!

2 Likes