Keep getting CORS error even if I set CORS origin(即使我设置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错误。
这篇关于即使我设置CORS原点也一直收到CORS错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:即使我设置CORS原点也一直收到CORS错误
基础教程推荐
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 我什么时候应该在导入时使用方括号 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 动态更新多个选择框 2022-01-01