L'accès depuis la source "https://example.com" est bloqué même si j'autorise https://example.com/

Question

J'ai une application réalisée avec React, Node.js et Socket.io

J'ai déployé le backend Node sur Heroku et le frontend sur Netlify

Je sais que les erreurs CORS sont liées au serveur, mais peu importe ce que j'ajoute, cela ne résout pas l'erreur dans l'image ci-dessous.

J'ai également ajouté le script proxy en tant que "proxy" dans le package.json de React : "https://googledocs-clone-sbayrak.herokuapp.com/"

Voici mon server.jsfichier ;

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.lis ten(process.env.PORT || 5000, () =>
  console.log(`Server has started.`)
);

C'est ici que je fais des requêtes au frontend ;

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 */
 }

Answer 1

Il semble que vous n'ayez pas encore importé le package cors. Est-ce importé d’ailleurs ?

var cors = require('cors') // is missing

Answer 2

TL;DR

https://googledocs-clone-sbayrak.netlify.app/ n'est pas origine. Supprimez la barre oblique finale.

Plus de détails sur le problème

Origin Les barres obliques finales ne sont pas autorisées dans les valeurs d'en-tête

Selon le protocole CORS (spécifié dans la norme Fetch ), les navigateurs ne définiront jamais un Origin 请求标头设置为带有尾部斜杠的值。因此，如果 https://googledocs-clone-sbayrak.netlify.app/whatever 上的页面发出跨源请求，则该请求的 Origin en-tête de requête sur une valeur avec une barre oblique finale. Ainsi, si la page https://googledocs-clone-sbayrak.netlify.app/whatever fait une requête d'origine croisée, l'en-tête

de cette requête contiendra

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

Sans aucune barre oblique finale.

Comparaison octet par octet côté serveur Vous utilisez Socket.IO, qui dépend du package cors 包。如果请求的来源与您的 CORS 配置的 origin 值 (https ://googledocs-clone-sbayrak.netlify.app/

node.js cors

. Si l'origine de la requête correspond à la valeur origin de votre configuration CORS (https://googledocs-clone-sbayrak.netlify.app/).

Assemblez-les

Évidemment, false，这会导致cors包不在响应中设置任何Access-Control-Allow-Origin

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

est évalué à l'en-tête

, ce qui provoque l'échec de la vérification CORS dans le navigateur, d'où l'erreur CORS que vous avez observée.

Obtenez des exemples standards La section 3.2.5 de la norme Fetch fournit même

un exemple éclairant de cette erreur

,

Access-Control-Allow-Origin: https://rabbit.invalid/

🎜Et explique pourquoi cela entraîne l'échec des vérifications CORS : 🎜