Deno Oak 禁用 Cors

Question

我正在尝试在我的本地环境中使用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方面遇到了问题：

由于CORS策略，无法从源'http://localhost:3000'访问'http://localhost:8000/'。请求的资源上没有'Access-Control-Allow-Origin'头。如果不透明的响应满足您的需求，请将请求的模式设置为'no-cors'以禁用CORS并获取资源。

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

或者添加：

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

- Nezir

---

我遇到了与上面相同的问题，下面的Deno解决方案都没有起作用吗？你在Deno上修复了它吗？ - Tran Son Hoang

这篇文章对我很有帮助，而且这个SO帖子是在DuckDuckGo上查询'deno oak cors'时的第一个搜索结果。然而，原帖作者对CORS存在误解，或者至少表述不准确，因为CORS是“跨源资源共享”，需要启用才能允许前端与后端进行通信，而不是像现在所说的那样禁用。请更新一下。 - Bart

或许不要更新，因为很多人对CORS感到困惑，因为这是一个难以理解的概念。澄清一下：您可以禁用的是“同源策略”，这是所有浏览器通常执行的策略。但是，这不能在客户端使用“no-cors”指示或其他方式禁用，只能在服务器端禁用，而接受的答案解释了如何在Deno Oak中实现此操作。 - Bart

Answer 1

在我的情况下解决方案相当简单。我需要在我的Deno API app.ts中导入oakCors。

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

在此之后，只需在应用程序实例化后添加被排除的来源(origin)即可：

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

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

关于 Deno CORS 的更多选项，请参阅以下链接：https://deno.land/x/cors

- Nezir

---

它似乎仍然无法正常工作。React应用程序可能有问题吗？ - Sabyasachi Bhoi

我认为 "false" 不起作用，因为您的浏览器需要CORS，所以您可能还需要添加 "no-cors"。["*", "http://localhost:3000"] 对我有用。 - Eric Burel

Answer 2

这个效果很好:

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

- Zoman

Answer 3

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

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

- Benko

Answer 4

你可以使用这个：

app.use(async (ctx, next) => {
 ctx.response.headers.set('Access-Control-Allow-Origin', '*'); // * for all servers, you can use your own server address
 ctx.response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); // Which methods you want to allow
 ctx.response.headers.set('Access-Control-Allow-Headers', 'Content-Type'); // If your request body has json
 await next(); // If you use async await in other middlewares, you must use async await here
});

- Kaveh Kavandi

---

你的回答可以通过提供更多的支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - undefined

Answer 5

请在路由之前放置app.use(oakCors())，像这样：

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

这允许在管理路由之前使用所有CORS

- emmadal