"Nodejs中遇到“Origin null is not allowed by Access-Control-Allow-Origin”错误"

"Nodejs中遇到“Origin null is not allowed by Access-Control-Allow-Origin”错误"

想试试看弄个能本地编辑网页然后连接 socket.io 的服务器, 遇到这个问题…
我把服务器运行在 8000 端口, 然后浏览器上这样方访问:

window.socket = io.connect('127.0.0.1:8000');

但是为了跨域名的脚本能连接上, 对 socket.io 添加设置…

http://stackoverflow.com/questions/6736706/socket-io-access-control-allow-origin-error-from-remote-site

var socket  = io.listen(app,{origins: '*:*'});

结果 Chrome 上还是遇到了这个报错,

Origin null is not allowed by Access-Control-Allow-Origin.

搜索结果大概说不同浏览器对这个安全问题的处理不同, Firefox 就可以的.

还有就是把文件放在一个服务器上, 就可以正常连接了.
后边搜到有两个解决的方案, 一个还是放到服务器上,
另一个是在启动 Chrome 时使用选项 –allow-file-access-from-files
具体看这个 issue https://github.com/LearnBoost/socket.io/issues/801

还一个 Chrome 的 console.log.apply 有个 illegal invocation, 办法在这:
http://stackoverflow.com/questions/8159233/typeerror-illegal-invocation-on-console-log-apply

后来用 socket.io 所运行服务器端口以外的方法连接 socket 遇到下面错误,
而且我已经家参数启动和设置 origins 参数的情况下:

Origin file:// is not allowed by Access-Control-Allow-Origin.

http://stackoverflow.com/questions/9833641/error-in-chrome-origin-file-is-not-allowed-by-access-control-allow-origin
还没找到办法… Chrome 18 …


5 回复

Node.js 中遇到“Origin null is not allowed by Access-Control-Allow-Origin”错误

在尝试本地开发一个能够通过 socket.io 连接到服务器的应用时，我遇到了一个常见的跨域问题：“Origin null is not allowed by Access-Control-Allow-Origin”。本文将介绍如何解决这个问题，并提供一些示例代码。

问题描述

我在本地运行了一个 Node.js 服务器，监听 8000 端口。客户端试图通过以下方式连接到服务器：

window.socket = io.connect('127.0.0.1:8000');

然而，尽管我在 socket.io 设置中添加了 origins 参数以允许跨域请求，Chrome 浏览器仍然抛出了以下错误：

Origin null is not allowed by Access-Control-Allow-Origin.

解决方案

1. 使用本地服务器

最简单且推荐的方法是将你的 HTML 文件托管在一个本地服务器上，而不是直接从文件系统中加载。你可以使用简单的 HTTP 服务器来实现这一点。

示例代码：

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

app.use(express.static(__dirname));

io.on('connection', (socket) => {
    console.log('a user connected');
    socket.on('disconnect', () => {
        console.log('user disconnected');
    });
});

http.listen(8000, () => {
    console.log('listening on *:8000');
});

启动服务器：

node server.js

然后，在浏览器中访问 http://localhost:8000，这样就可以避免跨域问题。

2. 启动 Chrome 时使用特殊选项

如果你希望直接在本地文件系统中测试，可以在启动 Chrome 时添加 --allow-file-access-from-files 选项。这允许 Chrome 从文件系统中加载内容而不受同源策略的限制。

启动命令：

chrome --allow-file-access-from-files

请注意，这种方法仅适用于开发环境，不建议在生产环境中使用，因为它会带来安全风险。

总结

当你在本地开发环境中遇到“Origin null is not allowed by Access-Control-Allow-Origin”错误时，最安全且推荐的做法是将你的应用托管在一个本地服务器上。如果需要快速测试，可以考虑使用上述的 Chrome 特殊启动选项，但请谨慎使用。


学习之

加了–allow-file-access-from-files还是没用

No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘file://’ is therefore not allowed access.

跨域问题, 通过服务端处理 CORS 来搞定… 我后来遇到的情况比较复杂的情况下的一篇笔记: http://blog.segmentfault.com/jiyinyiyong/1190000000503451 简单的方案是安装用 cors 模块在返回的请求头上写允许 CORS 的声明代码

当你在本地开发环境中使用 socket.io 并直接通过 file:// 协议打开 HTML 文件时，会遇到跨域问题（CORS），导致 Origin null is not allowed by Access-Control-Allow-Origin 错误。这是因为浏览器对于本地文件的同源策略更加严格。

解决方法

方法一：使用本地 HTTP 服务器

将你的 HTML 文件和 Node.js 服务都部署在一个本地 HTTP 服务器上。例如，你可以使用简单的 HTTP 服务器来托管这些文件：

// simple_http_server.js
const http = require('http');
const fs = require('fs');
const path = require('path');

const hostname = '127.0.0.1';
const port = 8000;

const server = http.createServer((req, res) => {
  fs.readFile(path.join(__dirname, 'index.html'), (err, data) => {
    if (err) {
      res.writeHead(404);
      res.end('Not Found');
      return;
    }
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(data);
  });
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

然后在你的 HTML 文件中连接 socket.io：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Socket.IO Test</title>
</head>
<body>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io('http://localhost:8000');
    // 其他逻辑...
  </script>
</body>
</html>

方法二：启动 Chrome 时添加参数

如果你希望在不改变当前开发环境的情况下解决这个问题，可以在启动 Chrome 时添加 --allow-file-access-from-files 参数：

chrome --allow-file-access-from-files

这样 Chrome 将允许从本地文件系统加载内容时进行跨域请求。

示例代码

结合上述两种方法，我们可以将 Node.js 服务器与简单的 HTML 文件结合起来，确保在本地开发环境中正确运行。

服务器端代码 (simple_http_server.js)

const http = require('http');
const fs = require('fs');
const path = require('path');
const io = require('socket.io')(8000);

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

const hostname = '127.0.0.1';
const port = 8000;

const server = http.createServer((req, res) => {
  fs.readFile(path.join(__dirname, 'index.html'), (err, data) => {
    if (err) {
      res.writeHead(404);
      res.end('Not Found');
      return;
    }
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(data);
  });
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

客户端代码 (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Socket.IO Test</title>
</head>
<body>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io('http://localhost:8000');
    socket.on('connect', () => {
      console.log('Connected to the server');
    });
    socket.on('disconnect', () => {
      console.log('Disconnected from the server');
    });
  </script>
</body>
</html>

这样配置后，你应该能够在本地环境中顺利运行 socket.io 而不会遇到 CORS 错误。

回到顶部