Deno Oak Disable Cors

Question

我想“连接”我的小React JS应用程序与我Deno API在我的本地环境与后端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);
    }

我的应用程序正在运行，localhost:3000而我的 deno api 正在运行localost:8000。

但是，我遇到了 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.

我尝试了一些建议，例如：将行添加'"proxy": "http://localhost:8000"到 reactjs 项目packages.json'。

或者添加：

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

fetch(apiUrl, options)

或者添加：

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

但是，在我的情况下没有任何作用。一直以来都会遇到相同的错误，以及一些基于建议的额外错误。

所以，我需要在我的 reactjs 和 deno api 应用程序中禁用 CORS，以允许前端和后端之间的本地开发通信。

Answer 1

就我而言，解决方案非常简单。

我必须将 OakCors 导入我的 Deno API app.ts

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

之后，只需在应用程序实例化后添加排除的原点：

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

注意：我试图将 origin 设置为origin: false，但在我的情况下不起作用。

有关 Deno CORS 的更多选项，请访问以下链接：https : //deno.land/x/cors

Answer 2

对我来说，我必须首先将 OakCors 配置传递给应用程序，然后传递路由。

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

Answer 3

这工作得很好：

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