无法解决Access-Control-Allow-Origin错误

问题描述 投票：0回答：1

我正在学习一些有关 Node.js 的课程。在socket.io部分，它正在教学使用socket.io制作多人乒乓球游戏。但即使遵循该课程后，它仍显示

from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
错误。

这是

server.js

const server = require('http').createServer()


const io = require('socket.io')(server)


server.listen(3000)

 io.on('connection',(socket)=>{        
 console.log("A user is connected")
})

这是

index.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pong Clone</title>
    <link rel="icon" type="image/png" 
href="https://s2.googleusercontent.com/s2/favicons?domain=www.jacinto.design">
    <link rel='stylesheet' href='stylesheets/style.css' />
</head>
<body>
<!-- Script -->


    <script type="importmap">
        {
          "imports": {
            "socket.io-client": "https://cdn.socket.io/4.4.1/socket.io.esm.min.js"
          }
        }
      </script>
  
      <script type="module">
        import { io } from "socket.io-client";
  
        const socket = io('http://127.0.0.1:4000')
      </script>



    <script src="javascripts/script.js"></script>
</body>
enter code here

我自己添加了

importmap
脚本。因为在课程中我遵循
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
这个脚本被使用并且
const socket = io('http://127.0.0.1:4000')
里面的
script.js
显示了
Uncaught ReferenceError: io is not defined
错误。 
script.js
只不过是游戏逻辑。

帮助我编辑

server.js
代码，以便它可以在用户连接到应用程序时记录消息。

node.js socket.io cors same-origin-policy
1个回答
0
投票

听起来您可能正在从本地文件系统加载客户端应用程序（HTML/JS），因为这就是为什么起源被称为 

null
。您可以确定浏览器中的 URL 是否显示 
file://
。

由于现代浏览器上有意强制执行的安全限制，您无法使用本地文件 URI 中的远程资源，而无需使用特殊的浏览器标志来禁用某些安全功能（比其价值更麻烦）。

通常，开发人员不会使用本地 

file://
URI 进行开发，部分原因是它无法有效模拟真实的生产环境（其中资源通过 HTTP 提供）。相反，您要做的是在 
http://localhost
上运行本地网络服务器，通过 HTTP 提供本地文件。

由于您已经有一个服务器（基于 NodeJS）来处理您的 Web 套接字，因此修改该服务器以服务您的本地静态资产是有意义的。

express.js 是一个流行的节点 Web 框架，捆绑静态资产服务。

首先在现有服务器包中

npm install --save express
然后修改
server.js
：

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

const io = require('socket.io')(server);

// Serve static files from the "public" directory
app.use(express.static('public'));

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

io.on('connection', (socket) => {
    console.log("A user is connected");
});

您现在需要创建一个 

public
文件夹，它是您的 
server.js
文件的同级文件夹，并且您应该将所有 HTML/Web 资源移至该文件夹中。

现在您的服务器不仅为您的 websocket 提供服务，还为静态 HTML/css/js 资源等提供服务。

您可以修改对 

io()
的调用，以便它不指定远程主机 URL，因为 socket.io 的默认设置是仅调用托管 HTML 页面的服务器，在进行这些修改后，该服务器为同一个服务器。这将完全解决与 CORS 相关的任何问题。

      <script type="module">
        import { io } from "socket.io-client";
  
        const socket = io()
      </script>

现在启动您的服务器并导航至 

http://localhost:3000
。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.