错误-:8080/:1 GET http://localhost:8080/404 (OK)答案

【问题标题】：ERROR- :8080/:1 GET http://localhost:8080/ 404 (OK)错误-:8080/:1 GET http://localhost:8080/404 (OK)
【发布时间】：2020-05-19 10:16:42
【问题描述】：

我在 8080 端口创建了一个简单的服务器，并使用 three.js 在我的 HTML 文档中加载了一个 GLTF 文件。这是服务器端代码，然后是 HTML 代码。

var http= require('http');
var fs = require('fs');


http.createServer(function(req,res){
  res.writeHead(200,{'content-type':'text/html'})
  fs.readFile('1.html',function(error,data){
    if(error){
      res.writeHead(404);
      res.write('FILE CANNOT BE FOUND'+error)
    }
    else{
      res.write(data)
    }
    res.end()
  })
}).listen(8080,function(error){
  if(error){
    console.log('Somenthing went wrong'+error)
  }else{
    console.log('Server is setup');
  }
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8
  </head>
  <body>
    <script type="module" src="https://threejs.org/build/three.js"></script>
    <script type="module" src="https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/loaders/OBJLoader2.js">

    </script>
    <script src="1.js"></script>
    <script type="module">

    import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/loaders/GLTFLoader.js';

      let scene, camera, renderer;

      function init() {

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xdddddd);

        camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
        camera.rotation.y = 45/180*Math.PI;
        camera.position.x = 800;
        camera.position.y = 100;
        camera.position.z = 1000;



        const hlight = new THREE.AmbientLight (0x404040,100);
        scene.add(hlight);

        const directionalLight = new THREE.DirectionalLight(0xffffff,100);
        directionalLight.position.set(0,1,0);
        directionalLight.castShadow = true;
        scene.add(directionalLight);
        const light = new THREE.PointLight(0xc4c4c4,10);
        light.position.set(0,300,500);
        scene.add(light);
        const light2 = new THREE.PointLight(0xc4c4c4,10);
        light2.position.set(500,100,0);
        scene.add(light2);
        const light3 = new THREE.PointLight(0xc4c4c4,10);
        light3.position.set(0,100,-500);
        scene.add(light3);
        const light4 = new THREE.PointLight(0xc4c4c4,10);
        light4.position.set(-500,300,500);
        scene.add(light4);

        var loader = new THREE.GLTFLoader();

    loader.load( 'model.gltf', function ( gltf ) {

    	scene.add( gltf.scene );

    }, undefined, function ( error ) {

    	console.error( error );

    } );

        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);


      }
      function animate() {
        renderer.render(scene,camera);
        requestAnimationFrame(animate);
      }
      init();
    </script>
  </body>
</html>

现在出现错误-:8080/:1 GET http://localhost:8080/ 404 (OK) 我的文件都命名为 1.js 和 1.html。

此外，还有 2 个警告-

DevTools 加载 SourceMap 失败：无法加载 chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map 的内容： HTTP 错误：状态码 404，net::ERR_UNKNOWN_URL_SCHEME

DevTools 无法加载 SourceMap：无法为 chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map：HTTP 错误：状态码 404，net::ERR_UNKNOWN_URL_SCHEME

即使我也尝试过使用目标文件。显示相同的错误。

【问题讨论】：

最后 2 个警告不相关。它们来自 chrome 扩展。在您的代码中，它说服务器正在侦听 8000，而不是 8080。也许这就是问题所在？在这种情况下，网址应该是 http://localhost:8000/1.html 并且可能是 <script src="./1.js"></script>
@EthanHermsey 我也检查过。仍然无法正常工作。仍然显示-加载资源失败：服务器响应状态为 404 (OK)
fs.readFile('1.html',function(error,data) 这行可能会引发错误。当前，错误处理程序返回 404 但不记录错误。添加console.error(error) 可能会揭示潜在问题。
@Boaz-ReinstateMonica console.error(error) 显示 (VM90:1 Uncaught ReferenceError: error is not defined at :1:15) 页面也显示 FILE CANNOT BE FOUND跨度>
@prinzu 第一个错误是来自服务器控制台还是浏览器？

标签： javascript html node.js

【解决方案1】：

该服务器最多只能提供一个文件。

您有什么理由编写自己的服务器？

无论如何，如果您想编写自己的服务器，则需要读取请求的文件，而不仅仅是1.html，并且您需要发送我入侵的正确mime类型，但您确实需要使用a library，因为有 100 种 mime 类型

const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');

const basePath = process.cwd();
const mimeTypes = {
  '.html': 'text/html',
  '.js': 'application/javascript',
  '.jpg': 'image/jpeg',
  '.png': 'image/jpeg',
};

http.createServer(function(req, res){
  const filename = `${basePath}${url.parse(req.url).pathname}`;
  fs.readFile(filename, function(error, data) {
    if(error){
      res.writeHead(404);
      res.end(`FILE ${filename} CANNOT BE FOUND ${error}`);
      return;
    }
    const mimeType = mimeTypes[path.extname(filename)];
    res.writeHead(200, {'content-type': mimeType || 'application/octet-stream'});
    res.end(data);
  })
}).listen(8080, function(error) {
  if (error){
    console.log('Something went wrong:', error);
  } else {
    console.log('Server is setup');
  }
});

大多数人不编写自己的服务器，他们使用an existing one，即使他们正在编写自己的服务器，他们也会使用a library，因为有很多微妙的事情需要处理，比如发送正确的 mime 类型，处理 CORS，处理 OPTIONS 和 HEAD 请求，流式传输结果，因为您真的不想使用 fs.readFile 将千兆字节视频加载到内存中，以及其他事情。

【讨论】：

谢谢先生。现在我没有收到任何错误，但它仍然没有在浏览器上显示任何内容，而是显示-“无法访问此站点localhost:8080 的网页可能暂时关闭，或者它可能已永久移动到新的网址。”