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

Posted 2023-03-04

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

【英文标题】：getting a cors issue when sending data to an api using javascript [duplicate]

【发布时间】：2020-12-26 04:08:59

【问题描述】：

我正在尝试将表单数据发送到 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 的资源。

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

【问题讨论】：

解决方法在错误中。服务器必须提供“Access-Control-Allow-Origin”标头。时期。就是这样。

@gforce301 我在后台添加

res.header 接受 2 个字符串 field, value 或包含标头的 JSON 对象作为 key-value 对。请将第二次呼叫修复为res.header 并检查

@KunalKukreja 是否可以为特定请求应用 cors 规则，例如在我的情况下，我只想为 /forms 应用 cors，我正在尝试您建议的解决方案

@Amar 你可能想使用这个：npmjs.com/package/cors#enable-cors-for-a-single-route。这将为您省去所有的麻烦

【参考方案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 实际上会做一些有用的事情。

【讨论】：

我已经为 Access-Control-Allow-Origin 添加了 *

【参考方案2】：

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

【讨论】：

这不适用于触发预检的请求（如在本例中）并且无论如何在生产环境中都不实用（要求人们安装浏览器扩展以禁用安全功能是不合理）。