如果我的 cors 已启用，则 cors 有错误？答案

【问题标题】：Have an error with cors, if my cors is enable?如果我的 cors 已启用，则 cors 有错误？
【发布时间】：2022-01-13 06:50:36
【问题描述】：

我想做一个请求获取或发布到我的 firebase 后端 api

这是我的要求

const verify = async (address) => {
  const params = { address }
  const { data } = await client.get('test', { params })
}

我的后端我正在使用 cors

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

const options = {
  origin: true,
  methods: 'GET,POST,PUT,DELETE,OPTIONS,HEAD,PATCH',
  preflightContinue: false,
  optionsSuccessStatus: 204,
}

app.use(cors(options))

app.get('/test', (req, res) => {
  console.log('console.log', req.body)
  res.status(200).send('hello world!')
})

module.exports = {
  Module: () => app,
}

我不知道发生了什么，但我在 cors 中遇到错误：

从源“http://localhost:8080”访问“https://...functions.net/test?address=AABB”的 XMLHttpRequest 已被 CORS 策略阻止：否“访问控制允许” -Origin' 标头存在于请求的资源上。

【问题讨论】：

标签： javascript firebase vue.js express

【解决方案1】：

我怀疑您需要将运行 Vue 应用程序的 URL 插入 options.origin

或者options.origin: true 是否将标头设置为 '"Access-Control-Allow-Origin": *'？

编辑：首先，您需要req.query.address 才能访问您从 Vue 发送的地址查询参数。

编辑：如果不将 options 设置为 cors()，我会从 Express 获得 Access-Control-Allow-Origin: * 响应标头。可能不想在生产中执行此操作，但将源设置为使用 API 的某个 URL。

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

app.use(cors())

app.get('/test', (req, res) => {
  console.log('console.log', req.query.address)
  res.status(200).send(`The address is ${req.query.address || "not existing"}`)
})


app.listen(3000, () => console.log("Express running..."))

【讨论】：

我应该把localhost:8080 放在原点吗？像这样：var corsOptions = { 来源：localhost:8080。 ???
我试过但不起作用
好吧，您可以尝试使用“localhost:8080” - 为什么使用 Firebase 客户端与您的 Express 后端 API 进行通信？在 Vue 中，您可以使用 const response = await fetch("http://localhost:80/test")
.listen() 只是为了我当地的权利？或者我需要改变生产？
.listen() 启动 express API。因此，您可能需要在生产环境中调整主机和端口，但在生产环境中的虚拟机/服务器上运行时仍需要 .listen()

【解决方案2】：

我用这个。在 Stackoverflow 上找到这个解决方案：



//#region CORS - Area...
var whitelist = [
  "http://127.0.0.1:3000",
  "https://127.0.0.1:3000",
  "https://localhost:3000",
  "http://localhost:3000",
];
var corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.indexOf(origin) !== -1 || !origin) {
      callback(null, true);
    } else {
      console.log("Blocked-Origin:", origin);
      callback(new Error("Not in CORS-Origin-List"));
    }
  },

  methods: ["POST, DELETE, GET"],
  optionsSuccessStatus: 200,
};
app.use(cors(corsOptions));
//#endregion CORS - Area...

而且这个方案不推荐，但是对于Test ok...

app.use(
cors({
optionsSuccessStatus: 200,
credentials: true,
origin: "*",
 methods: ["GET", "POST", "DELETE"],
})
);

注意：origin: "*", 不是 true

【讨论】：

我可以使用 origin:'*' 吗？
是的...但不建议在生产中使用！