javascript - 访问被 CORS 策略阻止
问题描述
我最近开始学习 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 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 错误。
任何帮助,将不胜感激。
谢谢
解决方案
推荐阅读
- visual-studio-code - 让 vscode 在启动时打开面板
- php - Laravel 验证器检查字段值是否等于“我的首选值”
- sql-server - 哪个防火墙规则允许 1433 TCP 端口
- php - 如何使用 laravel 6 在我的包中使用 auth 进行自定义防护?
- vba - 访问 OutPutTo 到文件夹
- python - Virtualenv,WSGI 守护进程错误。权限被拒绝:mod_wsgi,uid
- c++ - 如何在 if 语句中使用 Cin?
- aem - 我的问题是关于作者在 aem 的组件对话框中重新排序每个选项卡的能力
- sql - 在分组记录中选择重复记录?
- windows - 相当于Windows中的“转到文件夹窗口”,以访问位于当前目录其他位置的Windows打开提示符中的文件?