跨域请求被阻止，Express-Server mit cors答案

【问题标题】：Cross-Origin Request Blocked, Express-Server mit cors跨域请求被阻止，Express-Server mit cors
【发布时间】：2021-10-03 15:48:34
【问题描述】：

我尝试解决我的节点后端服务器中的一个问题，以获得一个对前端做出反应的电子邮件系统。我已经安装了 cors，但是我收到了一个错误，说跨域请求被阻止。我现在挣扎了好几个小时，但我不知道如何解决这个问题。

这是我的后端代码，包括 cors：

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

const bodyParser = require('body-parser');
const cors = require('cors');
const nodemailer = require('nodemailer');

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use(cors());

app.post('/send_mail', cors(), async (req, res) => {
  let { text } = req.body;
  const transport = nodemailer.createTransport({
    host: process.env.MAIL_HOST,
    port: process.env.MAIL_PORT,
    auth: {
      user: process.env.MAIL_USER,
      pass: process.env.MAIL_PASS,
    },
  });

  await transport.sendMail({
    from: process.env.MAIL_FROM,
    to: 'test@test.com',
    subject: 'test email',
    html: `<div className="email" style="
        border: 1px solid black;
        padding: 20px;
        font-family: sans-serif;
        line-height: 2;
        font-size: 20px; 
        ">
        <h2>Here is your email!</h2>
        <p>${text}</p>
    
        <p>All the best, Darwin</p>
         </div>
    `,
  });
});

app.listen(
  (process.env.PORT || 4000,
  () => {
    console.log('Server is listening on port 4000');
  })
);

这是我的前端代码：

import axios from 'axios';
import React, { useState } from 'react';

const Mailer = () => {
  const [sent, setSent] = useState(false);
  const [text, setText] = useState('');

  const handleSend = async (e) => {
    setSent(true);
    try {
      await axios.post('http://localhost:4000/send_mail', {
        text,
      });
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div className='Mailer'>
      {!sent ? (
        <form onSubmit={handleSend}>
          <input
            type='text'
            value={text}
            onChange={(e) => setText(e.target.value)}
          />
          <button type='submit'>Send </button>
        </form>
      ) : (
        <h3>Thanks for your message</h3>
      )}
    </div>
  );
};

export default Mailer;

我没有发现错误，有人发现问题了吗？

【问题讨论】：

标签： node.js reactjs express cors nodemailer

【解决方案1】：

有时，CORS 错误可能是由常规后端错误引起的，而不是实际的 CORS。

查看您的代码，我首先要检查的是确保 env 变量实际上得到了它们应该得到的值。

另外，请确保将 sendEmail 方法嵌套在 try catch 块中，并尝试注销服务器可能出现的任何错误

【讨论】：

我检查了 env 文件，一切都在这里。这是一个非常简单的邮件服务器，我不知道应该检查哪种错误。

【解决方案2】：

要使用 express 启用 cors，请参阅：https://enable-cors.org/server_expressjs.html

在 axios 中：Access Control Origin Header error using Axios in React Web throwing error in Chrome

【讨论】：

我认为在这种情况下不需要标头...但我还是尝试了，没有帮助。