拒绝执行脚本,因为它的MIME类型(...)和严格的MIME类型(...)

时间:2018-05-02 20:45:31

标签: http express server configuration

大家好我目前在Express上工作并尝试打开我的index.html时收到此错误消息:

拒绝执行来自' http://localhost:7500/app.bundle.js'的脚本因为它的MIME类型(' text / html')不可执行,并且启用了严格的MIME类型检查。 - 来自localhost /:1 -

基本上我目前尝试配置MIME类型,因为它似乎来自它。

这里是我的树形结构:

.
├── dist
│   ├── app.bundle.js
│   ├── app.bundle.js.map
│   ├── index.html
│   ├── ninja.json
│   ├── picture.jpeg
│   ├── style.css
│   └── test.txt
├── package.json
├── package-lock.json
├── router
│   └── router.js
├── server
├── server.js
├── src
│   └── App.jsx
├── static
│   └── index.html
├── tsconfig.json
└── webpack.config.js

HTML:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title> React Components </title>

</head>
<body>


      <h2> 1 </h2>

  <button style="height: 50px ; width : 250px ;" id="getText"> Get text </button>
  <button style="height: 50px ; width : 250px ;" id="getUser"> Get user </button>
  <button style="height: 50px ; width : 250px ;" id="getPosts"> GetPosts : Get API DATA </button>
<hr>

<div id="output"></div>
<form  id="addPost">

  <div>
    <input type="text" id="title" placeholder="Title">
  </div>

  <div>
      <textarea name="" id="body" cols="30" rows="10" placeholder="Body">

      </textarea>
  </div>

  <input type="submit" value="Submit">
  </form>
  <script src="app.bundle.js"></script>

  <img id='picture1' style='width : 125px ;' alt="">
</body>
</html>

JSX: App.jsx

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import 'isomorphic-fetch' ;
document.getElementById('getText').addEventListener('click', getText);
document.getElementById('getUser').addEventListener('click', getUser);
document.getElementById('getPosts').addEventListener('click', getPosts);
document.getElementById('addPost').addEventListener('submit', addPost);

function getText(){
fetch('/test.txt')
.then((res) =>  res.text()).
then((data) => document.getElementById('output').innerHTML = data ).
catch((err) => console.log(err));
};


function getUser(){
fetch('/ninja.json')
.then((res) => res.json())
.then((data) => {
    let output = '<h2> Users </h2>';
        data.forEach(function (user){
            output += `
                <ul>                <li> ${user.username}</li>
                    <li> Location: ${user.location}</li>
                    <li> ${user.online} </li>
                    <li> ${user.followers}</li>
            </ul>
            `
    });
    document.getElementById('output').innerHTML = output;
});
}

function getPosts(){
fetch('http://jsonplaceholder.typicode.com/posts')
.then((res) => res.json())
.then((data) => {
    let output = '<h2> Users </h2>';
        data.forEach(function (post){
            output += `
                <div>
                <h3> Title : ${post.title} </h3>
                <p> Body : ${post.body} </p>
            </div>
            `
    });
    document.getElementById('output').innerHTML = output;
});
}
function addPost(e){
    e.preventDefault() ;
        let title = document.getElementById('title').value;
        let body = document.getElementById('body').value;

        fetch('http://jsonplaceholder.typicode.com/posts', {
            method : 'POST',
            headers : {
                    'Accept' : 'application/json, text//plain, */*',
                    'Content-type' : 'application/json'
            },
            body : JSON.stringify({ title : title, body : body })
        })
        .then((res) =>res.json())
        .then((data) => console.log(data));
}

JS server.js

require("babel-polyfill");
var express = require('express');
var app = express();
var port = 7500 ;


app.get("/", (req, res) => {
 res.sendFile(__dirname + "/dist/index.html");
});




app.listen(port, function() {

    console.log('server started in port ' + port);

}) ;


app.use(express.static(__dirname + 'dist'));

package.json 

{
  "name": "reactdevelopment",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "./node_modules/.bin/nodemon ./server.js",
    "devserver": "node_modules/.bin/webpack-dev-server --hot --inline",
    "watch": "webpack --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2015-node4": "^2.1.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "create-react-class": "^15.6.3",
    "node": "^10.0.0",
    "nodemon": "^1.17.3",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-router": "^4.2.0",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  },
  "dependencies": {
    "body-parser": "^1.18.2",
    "es6-promise": "^4.2.4",
    "express": "^4.16.3",
    "fetch": "^1.1.0",
    "isomorphic-fetch": "^2.2.1",
    "mongo": "^0.1.0",
    "mongod": "^2.0.0",
    "mongodb": "^3.0.7",
    "mongoose": "^5.0.16",
    "source-map": "^0.7.2"
  }
}

webpack.config.js

const webpack = require('webpack');

module.exports = { 

 devtool: 'source-map',
 entry: {
     app:  __dirname +'/src/App.jsx'

  },
  output: {
    path:  __dirname + '/dist',
    filename: 'app.bundle.js'
  },

  module: {
    rules: [
      {
        test: /\App.jsx$/,
        loader: 'babel-loader',
        query: {
          presets: ['react','es2015']
        }
      }
    ]
  },

    devtool : '#source-map',

    optimization : { 

        splitChunks: {
            chunks: "async",
            minSize: 3000,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                priority: -10
            },
            default: {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
            }
            }
        }
    },
  devServer: {

    port: 8000,
    contentBase: 'static',
    proxy: {
      '/api/*': {
        target: 'http://localhost:7500'
      }
    }
  }
};

如果您有建议,链接文档,指示或提示它会很棒, 谢谢

2 个答案:

答案 0 :(得分:2)

现在/app.bundle.js返回

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /app.bundle.js</pre>
</body>
</html>

因为设置错误。

  • NG:app.use(express.static(__dirname + 'dist'));
  • 好的:app.use(express.static(__dirname + '/dist'));

__dirname不包括尾部斜杠。

  • 假设正确的路径为/.../myApp/dist/app.bundle.js
  • index.html来源app.bundle.js作为javascript文件,其中MIME应为text/javascript等。
  • 现在app.use(express.static(__dirname + 'dist'))
  • ==&GT; app.use(express.static('/.../myAppdist/app.bundle.js'))不存在。
  • express使用HTML返回404错误响应,MIME为text/html

答案 1 :(得分:0)

我在某处读到了一个带有prop的强制标签:<script type="application/javascript">解决了此问题..或它是否正在尝试检索外部JSON:type="application/json" ..不知道它是否有帮助.. < / p>