时间戳

首页 > 解决方案 > 在 Express 上的 nodeJS 中，无法加载 CSS 和 IMG 文件

javascript - 在 Express 上的 nodeJS 中，无法加载 CSS 和 IMG 文件

问题描述

在 index.html 上，无法加载 -> chrome 控制台 -> 拒绝应用来自 ' http://ec2-13-124-185-138.ap-northeast-2.compute.amazonaws.com/css/main的样式.css ' 因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

和

获取http://ec2-13-124-185-138.ap-northeast-2.compute.amazonaws.com/images/cthulu.png 404（未找到）

// 사용 모듈 로드
var express = require('express'); // 웹서버 사용 .
var app = express();
var fs = require('fs'); // 파일 로드 사용.


// 포트 설정
app.listen(3000, function () {
    console.log('Server Start .');
});
app.use(express.static(__dirname + '/public' ));
// 라우팅 설정
app.get('/', function (req, res) { // 웹서버 기본주소로 접속 할 경우 실행 . ( 현재 설정은 localhost 에 3303 port 사용 : 127.0.0.1:3303 )
    fs.readFile('index.html', function (error, data) { // index.html 파일 로드 .
        if (error) {
            console.log(error);
        } else {
            res.writeHead(200, { 'Content-Type': 'text/css' }); // Head Type 설정 .
            res.end(data); // 로드 html response .
        }
    });
});
 * { margin: 0; padding: 0; }
        body { font: 16px Helvetica, Sans-Serif; line-height: 24px; background: url(images/noise.jpg); }
        .clear { clear: both; }
        #page-wrap { width: 800px; margin: 40px auto 60px; }
        #pic { float: right; margin: -30px 0 0 0; }
        h1 { margin: 0 0 16px 0; padding: 0 0 16px 0; font-size: 42px; font-weight: bold; letter-spacing: -2px; border-bottom: 1px solid #999; }
        h2 { font-size: 20px; margin: 0 0 6px 0; position: relative; }
        h2 span { position: absolute; bottom: 0; right: 0; font-style: italic; font-family: Georgia, Serif; font-size: 16px; color: #999; font-weight: normal; }
        p { margin: 0 0 16px 0; }
        a { color: #999; text-decoration: none; border-bottom: 1px dotted #999; }
        a:hover { border-bottom-style: solid; color: black; }
        ul { margin: 0 0 32px 17px; }
        #objective { width: 500px; float: left; }
        #objective p { font-family: Georgia, Serif; font-style: italic; color: #666; }
        dt { font-style: italic; font-weight: bold; font-size: 18px; text-align: right; padding: 0 26px 0 0; width: 150px; float: left; height: 100px; border-right: 1px solid #999;  }
        dd { width: 600px; float: right; }
        dd.clear { float: none; margin: 0; height: 15px; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>KyuHyeon's Resume</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">

</head>

<body>

    <div id="page-wrap">

        <img src="/images/cthulu.png" alt="Photo of Cthulu" id="pic" />

        <div id="contact-info" class="vcard">

            <!-- Microformats! -->
            
            .................
            ..

标签： javascriptnode.js

解决方案

推荐阅读