即使我设置CORS原点也一直收到CORS错误
我有一个用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.jscors
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错误。
相关文章