我使用带有react的socketio作为前端和节点，并使用express js来制作一个应用程序

Question

当我试图在前端使用socketio客户端连接到后台时，它显示出错误，从起源'http://localhost:8080/socket.io/？eio=4&transport=polling&t=nok7aq9'访问XMLHttpRequest已被CORS策略阻止：对飞行前请求的响应没有通过访问控制检查：请求的资源上没有'access-control-allog-origin'标头。

import React, { Component, Fragment } from "react";

import openSocket from "socket.io-client";
import Post from "../../components/Feed/Post/Post";
import Button from "../../components/Button/Button";
import FeedEdit from "../../components/Feed/FeedEdit/FeedEdit";
import Input from "../../components/Form/Input/Input";
import Paginator from "../../components/Paginator/Paginator";
import Loader from "../../components/Loader/Loader";
import ErrorHandler from "../../components/ErrorHandler/ErrorHandler";
import "./Feed.css";

class Feed extends Component {
  state = {
    isEditing: false,
    posts: [],
    totalPosts: 0,
    editPost: null,
    status: "",
    postPage: 1,
    postsLoading: true,
    editLoading: false,
  };

  componentDidMount() {
    fetch("http://localhost:8080/feed/status", {
      headers: {
        Authorization: "Bearer " + this.props.token,
      },
    })
      .then((res) => {
        if (res.status !== 200) {
          throw new Error("Failed to fetch user status.");
        }
        return res.json();
      })
      .then((resData) => {
        console.log("status fetched ", resData.status);
        this.setState({ status: resData.status });
      })
      .catch(this.catchError);

    this.loadPosts();
    console.log("openSocket", openSocket);
    const socket = openSocket("http://localhost:8080/", {
      transports: ["polling", "websocket"],
      transportOptions: {
        polling: {
          extraHeaders: { "Access-Control-Allow-Origin": "*" },
        },
      },
    });
    socket.emit("connection", { data: "data" });
    socket.on("posts", (data) => {
      if (data.action === "create") {
        this.addPost(data.post);
      }
    });
  }





backend code 

mongoose
  .connect(
    "mongodb://chitesh:[e-mail]:27017,cluster0-shard-00-01.ulx1q.mongodb.net:27017,cluster0-shard-00-02.ulx1q.mongodb.net:27017/feed?ssl=true&replicaSet=atlas-demxn2-shard-0&authSource=admin&retryWrites=true&w=majority",
    { useNewUrlParser: true, useUnifiedTopology: true }
  )
  .then((result) => {
    const server = app.listen(8080); // this basically return us the server
    const io = require("./socket.js").init(server);
    // websockets uses http protocols  the basis
    //so we are passing our http based server to the function
    // to create a websocket connection

    // we are setting up a function
    // to be executed whener a new connection is made

    io.on("connection", (socket) => {
      console.log("Client connected");
    });
  })
  .catch((error) => {
    console.log(error);
  });


socket.js 

const { listenerCount } = require("./models/post");

let io;
module.exports = {
  init: (httpServer) => {
    io = require("socket.io")(httpServer);
    return io;
  },
  getIO: () => {
    if (!io) {
      let error = new Error("Socket.io is not initialized");
      throw error;
    }`enter code here`
    return io;
  },
};

Answer 1

看一下express CORS中间件。您需要允许将LocalHost:3000用作Origin。

您可以使用类似

var express = require('express')
var cors = require('cors')
var app = express()

var corsOptions = {
origin: 'http://localhost:3000',
}

app.use(cors(corsOptions))