即使我设置CORS原点也一直收到CORS错误 [英] Keep getting CORS error even if I set CORS origin

问题描述

我有一个用Reaction、Node.js和Socket.io制作的应用程序
我将节点后端部署到Heroku，将前端部署到Netlify

我知道CORS错误与服务器有关，但无论我添加什么，它都无法通过下图中的那个错误。
我还将代理脚本添加到Reaction的Package.json中，作为"代理"："https://googledocs-clone-sbayrak.herokuapp.com/"

这是我的server.js文件；

const mongoose = require('mongoose');
const Document = require('./Document');
const dotenv = require('dotenv');
const path = require('path');
const express = require('express');
const http = require('http');
const socketio = require('socket.io');
dotenv.config();

const app = express();
app.use(cors());
const server = http.createServer(app);
const io = socketio(server, {
  cors: {
    origin: 'https://googledocs-clone-sbayrak.netlify.app/',
    methods: ['GET', 'POST'],
  },
});

app.get('/', (req, res) => {
  res.status(200).send('hello!!');
});

const connectDB = async () => {
  try {
    const connect = await mongoose.connect(process.env.MONGODB_URI, {
      useUnifiedTopology: true,
      useNewUrlParser: true,
    });

    console.log('MongoDB Connected...');
  } catch (error) {
    console.error(`Error : ${error.message}`);
    process.exit(1);
  }
};

connectDB();


let defaultValue = '';

const findOrCreateDocument = async (id) => {
  if (id === null) return;

  const document = await Document.findById({ _id: id });

  if (document) return document;

  const result = await Document.create({ _id: id, data: defaultValue });
  return result;
};
io.on('connection', (socket) => {
  socket.on('get-document', async (documentId) => {
    const document = await findOrCreateDocument(documentId);
    socket.join(documentId);
    socket.emit('load-document', document.data);
    socket.on('send-changes', (delta) => {
      socket.broadcast.to(documentId).emit('receive-changes', delta);
    });

    socket.on('save-document', async (data) => {
      await Document.findByIdAndUpdate(documentId, { data });
    });
  });
  console.log('connected');
});

server.listen(process.env.PORT || 5000, () =>
  console.log(`Server has started.`)
);

这是我从前端发出请求的地方；

import Quill from 'quill';
import 'quill/dist/quill.snow.css';
import { useParams } from 'react-router-dom';
import { io } from 'socket.io-client';

const SAVE_INTERVAL_MS = 2000;
 

const TextEditor = () => {
  const [socket, setSocket] = useState();
  const [quill, setQuill] = useState();
  const { id: documentId } = useParams();

  useEffect(() => {
    const s = io('https://googledocs-clone-sbayrak.herokuapp.com/');
    setSocket(s);
     

    return () => {
      s.disconnect();
    };
  }, []); 

 /* below other functions */
 /* below other functions */
 /* below other functions */
 }

推荐答案

TL；DR

https://googledocs-clone-sbayrak.netlify.app/是不是一个origin。去掉后面那个劈开。

有关问题的更多详细信息

Origin头的值不允许尾随劈开

根据CORS协议(在Fetch standard中指定)，browsers never set the Origin request header to a value with a trailing slash。因此，如果位于https://googledocs-clone-sbayrak.netlify.app/whatever的页面发出跨域请求，则该请求的Origin头将包含

https://googledocs-clone-sbayrak.netlify.app

没有任何尾随的劈开。

服务器端逐字节比较

您正在使用Socket.IO、which relies onNode.js cors package。如果请求的来源与CORS配置的origin值(https://googledocs-clone-sbayrak.netlify.app/)不完全匹配，则该包不会在响应中设置任何Access-Control-Allow-Origin。

将所有内容放在一起

显然，

'https://googledocs-clone-sbayrak.netlify.app' ===
    'https://googledocs-clone-sbayrak.netlify.app/'

计算结果为false，这会导致cors包不在响应中设置任何Access-Control-Allow-Origin标头，这会导致您的浏览器中的CORS检查失败，从而导致您观察到CORS错误。

这篇关于即使我设置CORS原点也一直收到CORS错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！