[英]React Mixed content error while loading bundle.js (Http/ Https)
Trying my hands with React but getting error while serving it on heroku . 尝试使用React,但在heroku上投放时出错。 while its been working on my local. 而它一直在我的本地工作。
//error //错误
Mixed Content: The page at ' https://reactshoppingapp.herokuapp.com/ ' was loaded over HTTPS, but requested an insecure script ' http://localhost:3000/bundle.js '. 混合内容:“ https://reactshoppingapp.herokuapp.com/ ”上的页面已通过HTTPS加载,但请求了不安全的脚本“ http:// localhost:3000 / bundle.js ”。 This request has been blocked; 该请求已被阻止; the content must be served over HTTPS. 内容必须通过HTTPS提供。
My github profile if you can clone it and solve my error. 我的github个人资料(如果可以克隆它并解决我的错误)。 https://github.com/tanmoysarkar/shoppingApp.git https://github.com/tanmoysarkar/shoppingApp.git
My Package.json 我的Package.json
{
"name": "website",
"version": "1.0.0",
"engines": {
"node": "7.2.1"
},
"dependencies": {
"axios": "^0.17.1",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"bcrypt-nodejs": "0.0.3",
"body-parser": "^1.18.2",
"bootstrap": "^3.3.7",
"chai": "^4.1.2",
"connect": "^3.6.5",
"connect-flash": "^0.1.1",
"connect-mongo": "^2.0.1",
"cookie-parser": "^1.4.3",
"cookieparser": "^0.1.0",
"cors": "^2.8.4",
"css-loader": "^0.28.8",
"es2015": "0.0.0",
"express": "^4.16.2",
"express-session": "^1.15.6",
"express-validator": "^4.3.0",
"file-loader": "^1.1.6",
"font-awesome": "^4.7.0",
"mongoose": "^4.13.9",
"morgan": "^1.9.0",
"nodemon": "^1.14.7",
"passport": "^0.4.0",
"passport-local": "^1.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-hot-loader": "^3.1.3",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.1.0",
"serve-favicon": "^2.4.5",
"style-loader": "^0.19.1",
"url-loader": "^0.6.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.10.0",
"webpack-hot-middleware": "^2.21.0"
},
"scripts": {
"start": "node server.js",
"dev": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --inline --history-api-fallback --host 0.0.0.0 --port 3000",
"build": "react-scripts build",
"test2": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"postinstall": "npm run build",
"webpack": "webpack"
}
}
My Index.html 我的Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.8">
<meta name="description" content="My First Website">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Shopping Cart</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script type="text/javascript" src = "http://localhost:3000/bundle.js"></script>
<script src="js/jquery.js"></script>
<!-- End -->
<!-- Plugin JS -->
<script src="js/bootstrap.js"></script><!--bootstrap-->
</body>
</html>
webpack.config.js webpack.config.js
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-dev-server/client?http://0.0.0.0:3000',
'webpack-hot-middleware/client','./src/index.js'
],
output: {
path: __dirname + "/build",
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets:['es2015', 'stage-0','react']
}
},
{
test: ['./src/css/bootstrap.min.css'],
use: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
// Transform our own .css files with PostCSS and CSS-modules
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
}, {
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.html$/,
loader: "file-loader",
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: "url-loader"
},
{
test: /\.(ttf|eot|svg|jpg|png)(\?[\s\S]+)?$/,
use: 'file-loader'
}
],
},
//This config only to be used when components interact with models directly
devServer: {
publicPath: "/",
contentBase: "./public",
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
Any help over this would be great . 对此的任何帮助将是巨大的。 Waste already 2 day to solve it. 已经浪费了2天来解决它。 :( :(
Have you tried changing your javascript src path to a relative path? 您是否尝试过将javascript src路径更改为相对路径?
<body>
...
<script type="text/javascript" src = "/bundle.js"></script>
...
</body>
For this to work you have to add a script to your package.json 为此,您必须将脚本添加到package.json中
"scripts": {
"heroku-postbuild": "webpack -p --config ./webpack.config.js --progress"
}
See also this question: How to deploy node that uses Webpack to heroku 另请参阅以下问题: 如何将使用Webpack的节点部署到heroku
And the corresponding docs: https://devcenter.heroku.com/articles/nodejs-support#heroku-specific-build-steps 以及相应的文档: https : //devcenter.heroku.com/articles/nodejs-support#heroku-specific-build-steps
we made a couple of changes to his files: 我们对他的文件进行了一些更改:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
"scripts": {
"heroku-postbuild": "webpack"
}
now it works as expected 现在它按预期工作
corresponding merge ( https://github.com/tanmoysarkar/shoppingApp/commit/99b7d5a58928a87b79aa8f3e73d77f0ca6e0aa49 ) 相应的合并( https://github.com/tanmoysarkar/shoppingApp/commit/99b7d5a58928a87b79aa8f3e73d77f0ca6e0aa49 )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.