Deno Oak 禁用 Cors答案

【问题标题】：Deno Oak Disable CorsDeno Oak 禁用 Cors
【发布时间】：2020-09-29 17:56:56
【问题描述】：

我正在尝试使用 fetch() 在我的本地环境中将我的小型 React JS 应用程序与我的 Deno API 后端“连接”。

   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，以允许前端和后端之间的本地开发人员通信。

【问题讨论】：

我上面有同样的问题，下面没有 Deno 解决方案有效？你在 Deno 解决了吗？

标签： reactjs api cors deno

【解决方案1】：

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

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

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

之后，只需在应用实例化后添加排除的来源：

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

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

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

【讨论】：

它似乎仍然不起作用。反应应用程序有没有可能有问题？

【解决方案2】：

在您的路线之前放置app.use(oakCors())，如下所示：

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

这是允许所有 CORS 之前管理路由

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

这很好用：

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

【讨论】：