我的get请求代码工作，但当它涉及到post请求，我得到一个cors错误:
从'client.com'访问'api.com'的XMLHttpRequest已被CORS策略阻止:请求的资源上没有'Access- control - allow - origin '标头。
我确实尝试了所有与解决这个问题相关的方法，但我一直得到相同的结果。我想知道这是否因为我的socket服务器?这是令人沮丧的。
my node code:
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const session = require("cookie-session");
const cors = require("cors");
const server = require("http").createServer(app);
const rateLimit = require("express-rate-limit");
const io = require("socket.io")(server, {
cors: {
origin: "*",
},
});
const multer = require('multer');
const { v4: uuidv4 } = require('uuid');
let path = require('path');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(
session({
resave: false,
saveUninitialized: true,
secret: "shhhhhh",
})
);
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept"
);
next();
});
app.use(cors());
const {
registerTeacher,
loginTeacher,
getOneTeacher,
getAllTeachers,
postAvailibility,
deleteExpired
} = require("./teachers");
const {
loginStudent,
registerStudent,
getOneStudent,
bookTeacher,
} = require("./students");
const { postMessage, getMessages } = require("./classes");
///images
const storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, 'images');
},
filename: function(req, file, cb) {
cb(null, uuidv4() + '-' + Date.now() + path.extname(file.originalname));
}
});
const fileFilter = (req, file, cb) => {
const allowedFileTypes = ['image/jpeg', 'image/jpg', 'image/png'];
if(allowedFileTypes.includes(file.mimetype)) {
cb(null, true);
} else {
cb(null, false);
}
}
let upload = multer({ storage, fileFilter });
////teacher routes
app.post("/api/teachers/register", upload.single('photo'), registerTeacher);
app.post("/api/teachers/login", loginTeacher);
app.get("/api/teachers/:teacherId", getOneTeacher);
app.post("/api/teachers/:teacherId/calender", postAvailibility);
app.delete("/api/teachers/:teacherId/calender", deleteExpired)
///student routes
app.post("/api/students/register", upload.single('photo'), registerStudent);
app.post("/api/students/login", loginStudent);
app.get("/api/students/:studentId", getOneStudent);
app.get("/api/students/:studentId/ourteachers", getAllTeachers);
app.post("/api/students/:studentId/ourteachers/:teacherId", bookTeacher);
///Class Routes for getting messages only
app.put("/api/:classId/:studentId/:teacherId", postMessage);
app.get("/api/:classId/:studentId/:teacherId", getMessages);
////socket
let users = [];
const addUser = (userId, socketId) => {
!users.some((user) => user.userId === userId) &&
users.push({ userId, socketId });
};
const removeUser = (socketId) => {
users = users.filter((user) => user.socketId !== socketId);
};
const getUser = (userId) => {
return users.find((user) => user.userId === userId);
};
io.on("connection", (socket) => {
///connected
///take userId and socketId
socket.on("addUser", (userId) => {
addUser(userId, socket.id);
io.emit("getUsers", users);
});
///send and get message
socket.on("sendMessage", ({ senderId, receiverId, text }) => {
const user = getUser(receiverId);
io.to(user.socketId).emit("getMessage", {
senderId,
text,
});
});
socket.emit("me", socket.id);
socket.on("callUser", (data) => {
io.to(data.userToCall).emit("callUser", {
signal: data.signalData,
from: data.from,
name: data.name,
});
});
socket.on("answerCall", (data) => {
io.to(data.to).emit("callAccepted", data.signal);
});
///for mouse
socket.on("sendLines", (data) => {
io.to(data.to).emit("getLines", data.lines);
});
socket.on("clearLines", (data) => {
io.to(data.to).emit("getClearLines", data.lines);
});
///for slides
socket.on('sendSlidePosition', (data)=>{
io.to(data.to).emit('getSlidePosition', data.slidePosition)
})
socket.on('sendAllow', (data)=>{
io.to(data.to).emit('getAllow', data.data)
})
///disconnected
socket.on("disconnect", () => {
console.log("User disconnected");
removeUser(socket.id);
io.emit("getUsers", users);
});
});
let port = process.env.PORT;
if (port == null || port == "") {
port = 5000;
}
server.listen(port, function () {
console.log("Successful port connection");
});
my react code:
import { useState } from "react";
import axios from "axios";
import { useHistory } from "react-router-dom";
import { FormControl, Input, Button } from "@material-ui/core";
function TeacherSignup() {
let history = useHistory();
const url =
"myapi.com";
const [data, setData] = useState({
name: "",
email: "",
age: "",
phoneNumber: "",
nationality: "",
country: "",
city: "",
street: "",
postalCode: "",
password: "",
confirmPassword: "",
});
function submit(e) {
e.preventDefault();
if (data.password !== data.confirmPassword) {
alert("passwords must match");
}
axios
.post(url, {
name: data.name,
email: data.email,
age: data.age,
phoneNumber: data.phoneNumber,
country: data.country,
city: data.city,
street: data.street,
password: data.password,
postalCode: data.postalCode,
nationality: data.nationality,
})
.then((res) => {
console.log(res.data._id);
history.push(`/teachers/${res.data._id}`);
});
}
function handle(e) {
const newData = { ...data };
newData[e.target.id] = e.target.value;
setData(newData);
console.log(newData);
}
return (
<div className='login-form'>
<h1>Register Teacher</h1>
<form onSubmit={(e) => submit(e)}>
<div className="login-input">
<FormControl>
<Input
onChange={(e) => handle(e)}
id="name"
value={data.name}
placeholder="Name"
type="text"
></Input>
</FormControl>
</div>
<div className="login-input">
<FormControl>
<Input
onChange={(e) => handle(e)}
id="email"
value={data.email}
placeholder="Email"
type="text"
></Input>
</FormControl>
</div>
<div className="login-input">
<FormControl>
<Input
onChange={(e) => handle(e)}
id="age"
value={data.age}
placeholder="Age"
type="text"
></Input>
</FormControl>
</div>
<div className="login-input">
<FormControl>
<Input
onChange={(e) => handle(e)}
id="phoneNumber"
value={data.phoneNumber}
placeholder="Phone Number"
type="text"
></Input>
</FormControl>
</div>
<div className="login-input">
<FormControl>
<Input
onChange={(e) => handle(e)}
id="nationality"
value={data.nationality}
placeholder="Nationality"
type="text"
></Input>
</FormControl>
</div>
<div className="login-input">
<FormControl>
<Input
onChange={(e) => handle(e)}
id="country"
value={data.country}
placeholder="Country"
type="text"
></Input>
</FormControl>
</div>
<div className="login-input">
<FormControl>
<Input
onChange={(e) => handle(e)}
id="city"
value={data.city}
placeholder="City"
type="text"
></Input>
</FormControl>
</div>
<div className="login-input">
<FormControl>
<Input
onChange={(e) => handle(e)}
id="street"
value={data.street}
placeholder="Street"
type="text"
></Input>
</FormControl>
</div>
<div className="login-input">
<FormControl>
<Input
onChange={(e) => handle(e)}
id="postalCode"
value={data.postalCode}
placeholder="Postal Code"
type="text"
></Input>
</FormControl>
</div>
<div className="login-input">
<FormControl>
<Input
onChange={(e) => handle(e)}
id="password"
value={data.password}
placeholder="Password"
type="text"
></Input>
</FormControl>
</div>
<div className="login-input">
<FormControl>
<Input
onChange={(e) => handle(e)}
id="confirmPassword"
value={data.confirmPassword}
placeholder="Confirm Password"
type="text"
></Input>
</FormControl>
</div>
<Button type="submit">Submit</Button>
</form>
</div>
);
}
export default TeacherSignup;
我会删除app.use(cors())之前设置的显式CORS头，并将methods: ['GET', 'POST', 'DELETE', 'OPTIONS']添加到您的io配置中。
因为插座。IO v3，需要显式启用跨域资源共享(Cross-Origin Resource Sharing, CORS)