Akses daripada sumber "https://example.com" disekat walaupun saya membenarkan https://example.com/

Question

Saya mempunyai apl yang dibuat menggunakan React, Node.js dan Socket.io

Saya menggunakan bahagian belakang Node ke heroku dan bahagian hadapan kepada Netlify

Saya tahu ralat CORS berkaitan dengan pelayan, tetapi tidak kira apa yang saya tambahkan, ia tidak menyelesaikan ralat dalam gambar di bawah.

Saya juga menambah skrip proksi sebagai "proksi" dalam package.json React: "https://googledocs-clone-sbayrak.herokuapp.com/"

Ini ialah fail server.js saya;

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.`)
);

Di sinilah saya membuat permintaan ke bahagian hadapan;

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

Nampaknya anda belum mengimport pakej cors lagi. Adakah ia diimport dari tempat lain?

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

Answer 2

TL;DR

https://googledocs-clone-sbayrak.netlify.app/ bukan asal. Keluarkan garis miring mengekor.

Perincian lanjut tentang masalah

Origin Tanda miring tidak dibenarkan dalam nilai pengepala

Mengikut protokol CORS (dinyatakan dalam Fetch standard ), penyemak imbas tidak akan sekali-kali menetapkan Origin 请求标头设置为带有尾部斜杠的值。因此，如果 https://googledocs-clone-sbayrak.netlify.app/whatever 上的页面发出跨源请求，则该请求的 Origin permintaan pengepala kepada nilai dengan garis miring mengekor. Jadi jika halaman di https://googledocs-clone-sbayrak.netlify.app/whatever membuat permintaan silang asal, pengepala

untuk permintaan itu akan mengandungi

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

Tanpa sebarang tebasan mengekor.

Perbandingan bait demi bait sisi pelayan Anda menggunakan Socket.IO, yang bergantung pada pakej cors 包。如果请求的来源与您的 CORS 配置的 origin 值 (https ://googledocs-clone-sbayrak.netlify.app/

node.js cors

. Jika asal permintaan sepadan dengan nilai asal konfigurasi CORS anda (https://googledocs-clone-sbayrak.netlify.app/).

Letakkan mereka

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

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

menilai ke pengepala

, yang menyebabkan semakan CORS dalam penyemak imbas gagal, maka ralat CORS yang anda perhatikan.

Dapatkan contoh standard Bahagian 3.2.5 piawaian Ambil malah menyediakan

contoh yang jelas tentang ralat ini

,

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

🎜Dan menerangkan sebab ia menyebabkan semakan CORS gagal: 🎜