訪問被 CORS 策略阻止

Question

我最近開始學習 web 開發，如果有人可以幫助我修復 CORS 策略錯誤，我將不勝感激。

我正在嘗試將我的 React 應用程序與我的 node.js 應用程序連接起來。 我正在使用 axios http 服務。

反應應用程序中的 http 服務設置。

import axios from "axios";
import { toast } from "react-toastify";

axios.defaults.baseURL = process.env.REACT_APP_API_URL;
// axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*";
axios.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded";

console.log(axios.defaults.baseURL);

axios.interceptors.response.use(null, (error) => {
  const expectedError =
    error.response &&
    error.response.status >= 400 &&
    error.response.status < 500;

  if (!expectedError) {
    console.log("Logging the error", error);
    console.log(error.response);
    // toast.error("Unexpected error occured");
  }

  return Promise.reject(error);
});


export default {
  get: axios.get,
  post: axios.post,
};

使用 http 服務進行獲取和發布到后端。

import http from "./httpService";

const apiEndPoint = "/email";

export function sendMail(sender) {
  // console.log(sender);
  return http.post(apiEndPoint, {
    name: sender.name,
    email: sender.email,
    phone: sender.phone,
    company: sender.company,
    message: sender.message,
  });

  // return http.get(apiEndPoint);
}

后端 http 獲取和發布方法。

const express = require("express");
const router = express.Router();
const { validate } = require("../model/contact");
const nodemailer = require("nodemailer");

router.get("/", (req, res) => {
  res.header({ "Access-Control-Allow-Origin": "*" }).send("Hello world");
});

router.post("/", (req, res) => {
  res.header({ "Access-Control-Allow-Origin": "*" });

  const { error } = validate(req.body);
  console.log(error);
  if (error) return res.send(error.details[0].message);

  const output = `
    <p>You have a new contact request</p>
    <h3>Contact Details</h3>
    <ul>
      <li>Name: ${req.body.name}</li>
      <li>Company: ${req.body.company}</li>
      <li>Email: ${req.body.email}</li>
      <li>Phone: ${req.body.phone}</li>
    </ul>
    <h3>Message</h3>
    <p>${req.body.message}</p>
  `;

  // create reusable transporter object using the default SMTP transport
  let transporter = nodemailer.createTransport({
    host: "smtp.gmail.com",
    port: 465,
    secure: true, // true for 465, false for other ports
    auth: {
      user: "XXXX", // generated ethereal user
      pass: "XXXX", // generated ethereal password
    },
    tls: {
      rejectUnauthorized: false,
    },
  });

  // setup email data with unicode symbols
  let mailOptions = {
    from: '"Nodemailer Contact" XXXX', // sender address
    to: "XXX", // list of receivers
    subject: "Node Contact Request", // Subject line
    text: "Hello world", // plain text body
    html: output, // html body
  };

  // send mail with defined transport object
  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      return console.log(error);
    }
    console.log("Message sent: %s", info.messageId);
    console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));

    res.send("Email Sent!!");
  });
});

module.exports = router;

我還在客戶端和服務器上設置了代理。

令人驚訝的是，獲取請求正在工作，但發布請求會引發 CORS 錯誤。

任何幫助，將不勝感激。

謝謝

Answer 1

就像丹尼爾在評論中所說，您可能應該使用cors 模塊，而不是在這種情況下直接設置標題。

關於 GET 工作但 POST 不工作的一點是對正在發生的事情的重大貢獻。 當您進行跨域 POST 時，瀏覽器會使用帶有OPTIONS http 動詞的預檢請求來查看端點支持的內容（因為 POST 請求可能非常大，因此它可以節省帶寬和其他一些東西）。 如果您使用該模塊，這將為您處理。 或者，您可以自己實現它。