Question

我最近开始学习 Web 开发，如果有人可以帮助我修复 CORS 政策错误，我将不胜感激。

我正在尝试将我的 React 应用程序与我的 node.js 应用程序连接起来。我正在使用 axios http 服务。

在 React 应用程序中设置 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 get 和 post 方法。

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

就像 Daniel 在评论中所说的那样，在这种情况下，您可能应该使用 the cors module 而不是直接设置标题。

关于 GET 工作而不是 POST 的一点是对正在发生的事情的重大赠品。当您执行跨域 POST 时，浏览器确实使用 preflight request 和 OPTIONS http 动词来查看端点支持的内容（因为 POST 请求可能非常大，所以想法是它可以节省关于带宽和其他一些事情）。如果您使用该模块，这将为您处理。或者，您可以自己实现。

访问被 CORS 策略阻止

1 个答案: