使用javascript将数据发送到api时出现cors问题[重复]

Question

我正在尝试将表单数据发送到 api，并且当我向 api 发送请求时，我能够在前端对接上获取数据，但我遇到了一个我无法解决的错误，这是代码我将数据发送到 api 的 js

const value = {
            name: document.getElementById("name").value,
            designation: document.getElementById("designation").value,
            companyName: document.getElementById("companyName").value,
            email: document.getElementById("email").value,
            phoneNumber: document.getElementById("phoneNumber").value,
            pinCode: document.getElementById("pinCode").value,
            location: document.getElementById("location").value,
            message: document.getElementById("message").value,
          };

          const formReset = document.getElementById("contactForm");
          formReset.reset();

          const data = JSON.stringify(value);
          console.log(data);
          console.log(value.email);
var myHeaders = new Headers();

          myHeaders.append("Content-Type", "application/json");

          let requestOptions = {
            method: "POST",
            headers: myHeaders,
            body: JSON.stringify(value),
            redirect: "follow",
          };

          fetch(
            "https://us-central1-gmbexample-f23ef.cloudfunctions.net/api/forms",
            requestOptions
          )
            .then((response) => response.text())
            .then((result) => {
              console.log(result);
              alert(
                "Your form has been submitted successfully."
              );
            })
            .catch((error) => console.log("error", error));

这里是我如何处理后端请求

const functions = require("firebase-functions");
const express = require("express");
const bodyParser = require("body-parser");

const app = express();
require("dotenv").config();

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With",
    "Content-Type",
    "Accept"
  );
});
app.use(bodyParser.urlencoded({ extended: true }));
// URL => /api/reports (PUT)
//   .put("/reports", reportsServer);
app.post("/forms", async (req, res) => {
  console.log(req.body);
  res.status(200).send("oj");
});
exports.api = functions.https.onRequest(app);

我得到的错误是 CORS 策略已阻止从源“https://gmbexample-f23ef.firebaseapp.com”访问“https://us-central1-gmbexample-f23ef.cloudfunctions.net/api/forms”获取：对预检的响应请求未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

任何人都可以提出任何解决方案

Answer 1

CORS 是一种安全协议，用于确保向您的 API 发出 API 请求的客户端获得授权。浏览器执行“预检”检查，通过向您的 API 发送 HTTP OPTIONS 请求来确定这一点，这会告诉客户端它是否具有该权限。

您的 API 将需要使用所需的 CORS 标头来响应 OPTIONS 请求：https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request。

您对 OPTIONS 请求的响应至少应包含以下标头：

Access-Control-Allow-Origin: https://foo.bar.org

Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE

您可以在此处将值替换为 *，但如果您打算不公开您的 API，那么出于安全考虑，首选使用特定域，这样 CORS 实际上会做一些有用的事情。

Answer 2

你试过用chrome工具https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf吗？