2017-05-07 15 views
0

ここapp.jsファイルSocket.io MIMEの不一致エラー

import express from 'express'; 
import bodyParser from 'body-parser'; 
import mongoose from 'mongoose'; 
import http from 'http'; 
import event from 'events'; 
import io from 'socket.io'; 
import session from 'express-session'; 
import passport from 'passport'; 
import LocalStrategy from 'passport-local'; 
import multer from 'multer'; 
import fs from 'fs'; 
import passportLocalMongoose from 'passport-local-mongoose'; 
import postRoutes from './server/routes/posts.routes'; 
import commentRoutes from './server/routes/comments.routes'; 
import authRoutes from './server/routes/auth.routes'; 
import userRoutes from './server/routes/users.routes'; 
import {passportConfig} from './server/config/passport.config'; 
import {socketFunction} from './server/config/socket.io.config'; 
import path from 'path'; 

mongoose.connect('mongodb://localhost/blog'); 

const sanitizer = require('sanitize-html'); 
const app = express(); 

const server = http.Server(app); 
const socket = io(server); 
const localEvent = event.EventEmitter; 
const myEvent = new localEvent(); 

app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With,Access-Control-Allow-Origin, Content-Type, Accept, Authorization"); 
    res.header("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE, OPTIONS"); 

    next(); 
}); 


app.use(bodyParser.urlencoded({extended: true})); 
app.use(bodyParser.json()); 
app.use(session({ 
    secret: "some secret", 
    resave: false, 
    saveUninitialized: false 
})) 

passportConfig(app); 

app.use(postRoutes); 
app.use(commentRoutes); 
app.use(authRoutes); 
app.use(userRoutes); 
app.use(express.static(path.join(__dirname, '/client'))) 
app.use(express.static(path.join(__dirname, 'node_modules'))) 
app.use(express.static(path.join(__dirname, 'uploads'))) 


const port = 6655; 

['/admin/', '/admin/:var', '/admin/edit/:var'].forEach(function(url){ 
    app.get(url, (req, res)=>{ 
    res.sendFile(path.join(__dirname, '/client', '/dashboard', '/index.html')); 
    }) 
}) 

const blogRoutes = ['/', '/articles', '/articles/:url', '/contact']; 

blogRoutes.forEach(el=>{ 
    app.get(el, (req, res)=>{ 
    if(el === '/articles/:url'){ 
     socketFunction(socket, req.params.url, myEvent) 
    } 
    res.sendFile(path.join(__dirname, '/client', '/blog', '/blog.html')); 
    }) 
}) 

app.listen(process.env.PORT, process.env.IP,()=>{ 
    console.log(`Express server listening on port ${process.env.PORT} and IP ${process.env.IP}`); 
}); 

は私が私のsocket.io.configファイル

function socketFunction(io, url, event){ 
    const blog = io.of(`/articles/${url}`) 
    const admin = io.of('/admin/home') 
    blog.on('connection', (fromBlog)=>{ 
     console.log("Connection made on blog"); 
     fromBlog.on('comment', (msg)=>{ 
      event.emit('comment-posted', { 
       msg: msg.message 
      }) 
     }) 
    }) 
    admin.on('connection', (toAdmin)=>{ 
     console.log("Connection made on admin");   
     event.on('comment-posted', (msg)=>{ 
      toAdmin.emit('blog-comment', { 
       msg: msg.message 
      }) 
     }) 
    }) 
} 

export {socketFunction} 

、ここでは私の2つのHTMLファイルが

<!DOCTYPE html> 
<html ng-app="blog"> 
    <head> 
    <meta charset="utf-8"> 
    <base href="/blog" target="_blank"> 
    <title>Ayush Bahuguna | Web Developer</title> 
    <link rel="stylesheet" href="/blog/dist/css/styles.css"> 
    </head> 
    <body> 
    <script src='/socket.io/socket.io.js' type="text/javascript" charset="utf-8"></script> 
    <script src="/blog/dist/js/vendor.js" charset="utf-8"></script> 
    <script src="/blog/dist/js/app.js" charset="utf-8"></script> 
    </body> 
</html> 

<!DOCTYPE html> 
<html ng-app="cms"> 
    <head> 
    <meta charset="utf-8"> 
    <base href="/admin"> 
    <title>Blog Admin | Ayush Bahuguna</title> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
     rel="stylesheet"> 
    </head> 
    <body> 
    <root></root> 
    <script src="/socket.io/socket.io.js"></script> 
    <script src="/dashboard/dist/plugins/tinymce/tinymce.min.js" charset="utf-8"></script> 
    <script src="/dashboard/dist/js/vendor.js"></script> 
    <script src="/angular-ui-tinymce/dist/tinymce.min.js" charset="utf-8"></script> 
    <script src="/dashboard/dist/js/app.js"></script> 
    </body> 
</html> 

ありです受信中The resource from “http://localhost:6655/socket.io/socket.io.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff)

ネットワークタブを確認しました。socket.io.jsファイルのタイプがtext/htmlに設定されています。私はなぜこの問題が発生しているのかわからない、私はすべてのルートをキャッチする必要はありません。

私はsocket.ioのclientフォルダで利用可能socket.io.jsを使用することにより、回避する方法を見つけることを試みたが、socket.ioは、そのファイルを探していないと明示的に/socket.io/socket.io.js

を探していることが判明あなたの助けは非常に高く評価されています。

+0

@lixこれはhtmlファイルにあります。 –

答えて

2

問題はこれです:...

server.listen(...); 

const server = http.Server(app); 
const socket = io(server); 
... 
app.listen(...); 

あなたはどちらかの呼び出しserverに耳を傾けなければならない...またはExpressが何をしている(あなたのためのHTTPサーバを作成してみましょうapp.listen()それが動作しない理由もあります:新しいサーバーを作成するとき、そのサーバーにはsocket.ioが添付されていません)。

const server = app.listen(...); 
const socket = io(server); 

あなたが受け取ったtext/htmlの応答はおそらく404応答のためです。