chrome 浏览器中的 CORS Node.js

Question

我正在使用 Heroku 和 netlify 来托管

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

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

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

Answer 1

使用 npm cors package in your nodejs program, and place your netlify origin on the 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 headers。

您肯定不想为您的用户要求网络扩展。如果这样做，您将不会有很多用户。 :-)

Answer 2

在解决 CORS 错误之前，您必须了解它是如何工作的，引用自 IBM.com：

CORS is a mechanism that uses additional HTTP header to inform a browser to allow a web application running at one origin (domain) have permission to access selected resources from a server at a different origin

考虑一个用于 ABC 银行的 API，黑客想要向此 API 发送一些请求，但是对于您的帐户，如果 CORS 不存在，黑客可以简单地编写一个恶意软件代码如下：

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

并将此脚本放在 third-party 网站上。当你打开那个网站时，黑客可以偷走你所有的钱！

但幸运的是，我们的浏览器实施了 CORS 机制以防止这种不受欢迎的 cross-domain 请求，要定义哪个源可以将请求发送到特殊路由，您必须在 Access-Control-Allow-Origin header 在您的回复中 header。有一个名为 cors 的中间件，您可以使用它来定义此 header...

Answer 3

如果您想处理多个来源：

let whitelist = [
  process.env.WEB_URL,
  process.env.ROOT_API,
  process.env.SOCKET_URL
]

let corsOptions = {
  origin: (origin, callback) => {
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Origin not allowed by CORS'))
    }
  }
}

app.use(cors(corsOptions))

chrome 浏览器中的 CORS Node.js

CORS Node.js in chrome browser

backend

heroku

node.js

cors

reactjs