laravel vuejs socket.io Access-Control-Allow-Origin

Question

你好 laravel 我正在尝试将 socket.io 与 vuejs 一起使用，但我不断收到错误，我不明白我哪里出错了。 我想做的事情很清楚，当表单提交时，它被观众收听，并立即看到给经理的帖子。当然，这不会发生。我使用 socket.io 错误。我无法理解。

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');
});

formpost.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;
                    }
                })

adminlist.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();
        });
    },

package.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 的功能造成的，该功能包括浏览器对您要使用 HTTP OPTIONS 访问的服务器执行某种“ping 请求”以获取响应标头并检查对于Access-Control-Allow-Origin 标头。

想法是您的 API 应在此标头中声明允许哪些来源（域）使用您的资源/API。

解决此问题的“最简单”方法是将您的 API 配置为以 Access-Control-Allow-Origin: * 响应。 但这不是正确的方法，你不应该去生产*作为配置。

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

如果您使用的是@vue/cli，它已经有一个配置代理服务器以进行开发的选项，请查看docs。

但是，如果您使用 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 与 websockets 一起使用，但 docs 表示它支持它。