Deno Oak Disable Cors

Question

I am trying to 'connect' my small React JS app with my Deno API backend on my local environment with fetch().

   const apiUrl = `http://localhost:8000`;

   try{

    fetch(apiUrl)
      .then((res) => res.json())
      .then((repos) => {
        console.log(repos);
        setAppState({ loading: false, repos: repos });
      });
    }catch(err){
      console.log(err);
    }

My app is serving on localhost:3000 and my deno api on localost:8000.

However, I am having problem with CORS:

Access to fetch at 'http://localhost:8000/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I tried some suggestions like: add line '"proxy": "http://localhost:8000" to reactjs project packages.json'.

Or to add:

var options = {
    method: 'get',
    headers: {
        "Access-Control-Request-Headers": "*",
        "Access-Control-Request-Method": "*"
    },
  }

fetch(apiUrl, options)

Or to add:

fetch(apiUrl, {mode: 'no-cors'})

However, nothing works in my case. All the time getting the same error and some additional based on suggestions.

So,I need to disable CORS in my reactjs and deno api app to allow local dev communication between frontend and backend.

I have same issue above and no Deno solution below working? have u fixed it at Deno? — Hoang Subin, Dec 14 '20 at 16:32
This helped me, and this SO post was the first search result in DuckDuckGo on query 'deno oak cors'. However the OP misunderstands CORS or at least misformulated the question as CORS is 'Cross Origin Resource *Sharing*' and is something that needed to be ENabled to allow the front-end to backend communication, not DISabled as the question or subject now says. Please update. — Bart, Oct 28 '22 at 05:04
Or perhaps don't update as many people are confused about CORS, since it is a hard concept to grasp. To clarify: what you can DISable is the 'Same-Origin policy' which all browser normally enforce. But this can NOT be disabled on the client side with a 'no-cors' indication or something but only server side, which the accepted answer explains how to do in Deno Oak. — Bart, Oct 28 '22 at 05:21

score 8 · Accepted Answer · edited Jun 10 '20 at 16:03

8

Solution in my case was pretty easy.

I had to import oakCors into my Deno API app.ts

import { oakCors } from "https://deno.land/x/cors/mod.ts";

after that, just add the excluded origin after app instantiation:

app.use(
    oakCors({
      origin: "http://localhost:3000"
    }),
);

NOTE: I tried to set origin to origin: false and that did not work in my case.

For more options on Deno CORS here is a link: https://deno.land/x/cors

edited Jun 10 '20 at 16:03

Lonnie Best

9,936
10
57
97

answered Jun 10 '20 at 10:39

Nezir

6,727
12
54
78

It still doesn't seem to work. Is there a chance there's something wrong with the react app? – Sabyasachi Bhoi Nov 22 '20 at 06:26
I think "false" won't work because your browser expect CORS, so you might need to also add "no-cors". ["*", "http://localhost:3000"] worked for me – Eric Burel Aug 31 '22 at 08:47

score 4 · Answer 2 · answered Dec 23 '20 at 21:18

4

This works just fine:

app.use(oakCors({ origin: "*" }));

answered Dec 23 '20 at 21:18

Zoman

2,047
4
28
44

score 3 · Answer 3 · answered Jul 02 '20 at 08:47

3

For me, I had to first pass oakCors configuration to the app and then the routes.

app.use(oakCors({
    origin: 'http://localhost:4200',
    optionsSuccessStatus: 200,
}));
app.use(router.routes());

answered Jul 02 '20 at 08:47

Benko

43
3

score -3 · Answer 4 · answered Jun 30 '20 at 16:21

-3

placeapp.use(oakCors()) before your routes like this:

app.use(oakCors())
app.use(route.routes())

this is allow all CORS before to manage the routes

answered Jun 30 '20 at 16:21

emmadal

1

Deno Oak Disable Cors

4 Answers4