laravel vuejs socket.io访问控制允许来源

Question

你好，laravel，我正试图将socket.io与vuejs一起使用，但我一直在出错，我不明白哪里出了问题。我想做的是，当表格提交时，观众会听到它，并立即向经理看到帖子。当然，这并没有发生。我用错了插座。我无法理解。

laravel.local/:1 Access to XMLHttpRequest at 'http://localhost:3000/socket.io/?EIO=3&transport=polling&t=NNy_ruN' from origin 'http://laravel.local:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

server.js

var app = require('express')();
const server = require('http').createServer();
const io = require('socket.io')(server);

// http.listen(3000);
app.get('/', (req, res) => {
res.send('<h1>Hello world</h1>');
});
io.on('connection', socket => {
socket.on('new_appointment_create', function () {
console.log("okey");
io.emit('admin_appointment_list');
});
});
server.listen(3000, function () {
console.log('Listening on Port: 3000');
});

表单post.vue

import io from 'socket.io-client';
var socket = io('http://localhost:3000');

.then((response) => {
if (response.status) {
socket.emit('new_appointment_create');
this.completeForm = false;
}
})

管理员.vue

import io from 'socket.io-client';
var socket = io('http://localh
created() {
this.getData();
socket.on('admin_appointment_list', () => {
console.log("list okey");
this.getData();
});
},

软件包.json

"devDependencies": {
"axios": "^0.19",
"bootstrap": "^4.0.0",
"cross-env": "^7.0",
"jquery": "^3.2",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"resolve-url-loader": "^3.1.2",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"socket.io": "^3.0.3",
"socket.io-client": "^2.3.1",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"express": "^4.17.1",
"laravel-vue-pagination": "^2.3.1",
"v-mask": "^2.2.3",
"vue-resource": "^1.5.1"
}

Answer 1

您收到的错误是由于来自名为preflight的浏览器的一个功能引起的，该功能包括浏览器执行某种"；ping请求"；到要使用HTTP OPTIONS访问的服务器，以获取响应标头并检查Access-Control-Allow-Origin标头。

这个想法是，您的API应该在这个头中声明哪些源(域(可以使用您的资源/API。

"；最简单的"；解决此问题的方法是将API配置为使用Access-Control-Allow-Origin: *进行响应。但这不是正确的方式，您不应该将生产*作为配置。

在我看来，解决这个问题的正确方法是在开发过程中使用http代理，在生产过程中，您可以配置Apache或NGINX，或者您将使用的任何http服务器。

如果您使用的是@vue/cli，那么它已经有了一个为开发配置代理服务器的选项，请参阅文档。

但是，如果您使用devProxy选项，则快速转发所需的重构，您基本上会将前端为您提供服务的同一服务器/端口中的资源/上下文映射到您的websocket的代理请求/连接。

然后，您将停止直接调用http://localhost:3000，并使用映射的资源/上下文。

例如：

在您的vue.config.js 中

module.exports = {
devServer: {
proxy: {
'^/api': {
target: 'http://localhost:300',
ws: true
}
}
}
}

然后您将创建套接字：

var socket = io(`${location.protocol}//${location.host}/api`);

老实说，我从来没有把devProxy和websocket一起使用过，但文档说它支持它