Issue contacting the Dev.to API from personal site

#help

So I'm trying to set up a feed on my personal portfolio website to show my most recent couple blog posts. This is a simple Javascript frontend hosted on Netlify.

I've set up a fetch to the api for my articles, with api-key and everything. It works in Postman, but once I'm running it in Chrome I run into what I think is a CORS issue. The console puts out: Failed to load resource: net::ERR_BLOCKED_BY_CLIENT and Failed to load resource: the server responded with a status of 404 ()

Here is my fetching code:

  var myHeaders = new Headers();
  myHeaders.append("api-key", "xxx");

  var requestOptions = {
    method: "GET",
    headers: myHeaders,
    redirect: "follow"
  };

  fetch("https://dev.to/api/articles/me/published?=", requestOptions)
    .then(response => response.text())
    .then(result => console.log(result))
    .catch(error => console.log("error", error));

Has anyone had success setting up an API call to their blog? Can anyone suggest how to get around this issue?

Googling this proves incredibly difficult for some reason.

Top comments (2)

rhymes • Feb 16 '20

Hi Helen, thanks a lot of reporting this, thanks @peter for tagging me!

Unfortunately it is a known issue:

API: Fetching endpoint /api/articles/me sometimes returns CORS error. #5877

emilpriver commented on Feb 03, 2020

Currently working with the api and I see that the endpoint gives CORS error, but on second request does it work. This do i only get while using /api/articles/me request.

To Reproduce

use Axios GET
request dev.to/api/articles/me/ with api-key header with React router
if fails, reload and it should return a 200 OK.

Expected behavior

To render 200 OK response

Desktop (please complete the following information):

OS: Windows 10
Browser: Chrome
Version: Chrome 79.

View on GitHub

we do have some issues with CORS (cross origin request sharing, aka calling a website from another website). By default browsers block these requests for security reasons.

While we plan to fix this we haven't got to it yet.

A possible solution, in the meantime, is illustrated by this user's post:

CORS Problem Workaround for Consuming DEV.TO API on Your Website

Jason Reed ・ Dec 14 '19 ・ 1 min read

#cors #devtoapi #php

which consists of having a server side page that does the API call.

A personal note: as you're writing a frontend website that calls a protected API (behind the DEV API key) you should know there's a potential for leakage if this page ever gets published (since the API key) resides in the HTML page or JS file. I suggest you look into doing that specific HTTP call on the server anyway, and have your JS client call your server that then calls DEV. Basically a proxy :)

Let me know if any of this isn't super clear, happy to help!