chrome 浏览器中的 CORS Node.js答案

【问题标题】：CORS Node.js in chrome browserchrome 浏览器中的 CORS Node.js
【发布时间】：2021-10-31 20:19:13
【问题描述】：

我正在使用 Heroku 和 netlify 来托管

https://n-blogcode.netlify.app/

现在我在后端使用 cors，需要在我的电脑上使用 chrome extension 将其打开才能使卡片部分正常工作。

但不是每个人都知道通过扩展启用 cors 访问以查看我的网站。那我怎么做才能让大家直接看到呢

【问题讨论】：

标签： node.js reactjs heroku cors backend

【解决方案1】：

在解决 CORS 错误之前，您必须了解它的工作原理，IBM.com 引用：

CORS 是一种使用附加 HTTP 标头来通知允许在一个来源（域）运行的 Web 应用程序的浏览器具有从不同的服务器访问选定资源的权限产地

考虑一个用于 ABC 银行的 API，黑客想要向该 API 发送一些请求，但使用您的帐户，如果 CORS 不存在，黑客只需编写类似这样的恶意软件代码：

Axios.post("https://bankABC.com/api/MoneyTransfer?to=123456789");

并将此脚本放在第三方网站上。当你打开那个网站，黑客就可以偷走你所有的钱！

但幸运的是，我们的浏览器中实现了 CORS 机制以防止此类不受欢迎的跨域请求，要定义哪个源可以将请求发送到特殊路由，您必须在响应标头中的 Access-Control-Allow-Origin 标头中进行设置.有一个叫cors的中间件，你可以用它来定义这个头...

【讨论】：

【解决方案2】：

在你的 nodejs 程序中使用 npm cors 包，并将你的 netlify 源放在 allowed list 上。

这样的事情可能会奏效。

const express = require('express')
const cors = require('cors')
const app = express()

var corsOptions = {
  origin: 'https://n-blogcode.netlify.app'
}

...

app.use(cors(corsOptions))           //cors for all routes
app.options('*', cors())             //cors for preflight requests

这会导致您的 nodejs 程序在其对来自 netlify 上托管的 html / js 代码的请求的响应中包含适当的 CORS 标头。

您绝对不希望您的用户需要网络扩展。如果这样做，您将不会有很多用户。 :-)

【讨论】：