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.

服务器.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;
                    }
                })

管理列表.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的功能，该功能包括浏览器向您要使用 HTTP OPTIONS 访问的服务器执行某种“ping 请求”以获取响应标头并检查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与 websockets devProxy使用，但文档说它支持它。