[英]Socket.io connection fails between client and server side (Reacr/Node.js)
我正在嘗試獲得基本的套接字連接。
服務器看起來像這樣:
const express = require("express");
const app = express();
const port = 4000;
const server = require("http").createServer(app);
let io = require("socket.io")(server);
app.get("/", (req, res) => res.send("Server up"));
io.on("connection", socket => {
console.log("a user connected");
});
app.get("/", (req, res) => res.send("Hello World!"));
app.listen(port, () => console.log(`Example app listening on port ${port}!`));
React 組件如下所示:
import React, { useState, useEffect } from "react";
import io from "socket.io-client";
const ChatScreen = () => {
const socket = io('localhost:4000');
useEffect(() => {
}, []);
return (
<div className="chatScreen">HI</div>
);
};
export default ChatScreen;
正如我從閱讀中得到的那樣,我應該在服務器中得到一個 console.log“一個用戶連接”。 但是我收到了這兩個錯誤:
Access to XMLHttpRequest at 'http://localhost:4000/socket.io/?EIO=3&transport=polling&t=N2xxl7i'
from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-
Origin' header is present on the requested resource.
和
polling-xhr.js:267 GET http://localhost:4000/socket.io/?EIO=3&transport=polling&t=N2xy65_
net::ERR_FAILED
我該怎么做?
在你的 node js 應用程序中,你可以嘗試在var app = express();
之后添加以下內容var app = express();
:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Headers", "Content-Type");
res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
next();
});
此錯誤意味着您的 Express 服務器不允許任何外部請求。 您的 React 服務器是外部服務器,這就是此錯誤的原因。
要修復此錯誤,只需將cors 中間件用作:
const express = require("express");
const cors= require("cors");
const app = express();
const port = 4000;
const server = require("http").createServer(app);
let io = require("socket.io")(server);
app.use(cors());
app.get("/", (req, res) => res.send("Server up"));
io.on("connection", socket => {
console.log("a user connected");
});
app.get("/", (req, res) => res.send("Hello World!"));
app.listen(port, () => console.log(`Example app listening on port ${port}!`));
文檔: https : //expressjs.com/en/resources/middleware/cors.html
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.