亚马逊AWS EC2 React应用程序被阻止(内容安全政策)

Question

所以我的部署与这里完全一样：https://medium.com/@rksmith369/如何部署mern-stack-app-on-aws-ec2-与-ssl-nginx-the-right-way-e76c1a8cd6c6

但我的React应用程序不会加载，而是被阻止(内容安全策略(。

也许是nginx的问题？或者我的React应用程序坏了？我找了一整天，所以我想试试并寻求帮助。

编辑：新问题我的主页被加载，但在所有其他网站上，如果我重新加载，我会得到404

新建Server.js

const express = require('express')
const mongoose = require('mongoose')
const http = require('http')
const socketio = require('socket.io')
const path = require('path')
const bodyParser = require('body-parser')
require('dotenv').config()
const app = express()
// Body Parser Middleware:
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.use(express.static(path.join(__dirname, 'client/build')))
mongoose
.connect(process.env.DATABASE, {
useNewUrlParser: true,
useFindAndModify: false,
useUnifiedTopology: true,
useCreateIndex: true,
})
.then(() => console.log('DB connected'))
.catch(() => console.log('DB Connection Error:', err))
const server = http.createServer(app)
const io = socketio(server, {
cors: {
origin: process.env.CLIENT_URL,
methods: ['GET', 'POST'],
},
})
// Assign socket object to every request
app.use(function (req, res, next) {
req.io = io
next()
})
// Routes
const orderRoutes = require('./routes/order')
// Middleware
app.use('/api', orderRoutes)
const PORT = process.env.PORT || 5000
server.listen(PORT, console.log(`Server läuft auf Port: ${PORT}`))

React应用程序包.json

{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",
"antd": "^4.15.6",
"axios": "^0.21.1",
"lodash": "^4.17.21",
"react": "^17.0.2",
"react-bootstrap": "^1.5.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.3",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-slick": "^0.28.1",
"react-toastify": "^7.0.3",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"socket.io-client": "^4.1.2",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Answer 1

问题不在于React应用程序或服务器，而在于头盔配置。更新CORS配置以提供有效的内容安全策略。例如

app.use(helmet({
contentSecurityPolicy: {
directives: {
...helmet.contentSecurityPolicy.getDefaultDirectives(),
'script-src': ["'self'", 'https://apis.google.com'],
'style-src': ["'self'", "'unsafe-inline'", 'https://fonts.googleapis.com'],
'connect-src': ["'self'", 'https://accounts.google.com' ],
'img-src': ['https:', 'data:'],
},
},
}));

要阅读更多关于CSP结账这个

1. MDN文档
2. 头盔