如何纠正 nodejs 的问题，反应应用程序未正确加载与内容安全策略相关的内容答案

【问题标题】：how to correct issue with nodejs with react app not loading content properly related to Content Security Policy如何纠正 nodejs 的问题，反应应用程序未正确加载与内容安全策略相关的内容
【发布时间】：2018-03-12 13:27:36
【问题描述】：

当我在笔记本电脑上运行服务器时似乎没有问题时，我的代码没有部署在 heroku 上并显示“无法获取 /”消息，目前我遇到了问题。我不确定这是否是路径问题，因为我的控制台发出了以下错误：内容安全策略：页面的设置阻止了自身资源的加载（“default-src https://mvpauto.herokuapp.com”）。来源： ;(function installGlobalHook(window) {

我没有设置我的代码来修改我的响应对象标头来设置 CSP，我也没有在 body-parser 之外运行任何中间件，我也尝试在调试中禁用它，但无济于事。我的标题如下：

Server  Cowboy
Connection  keep-alive
X-Powered-By    Express
Content-Security-Policy default-src 'self'
X-Content-Type-Options  nosniff
Content-Type    text/html; charset=utf-8
Content-Length  139
Date    Sun, 01 Oct 2017 04:12:05 GMT
Via 1.1 vegur


Request headers (364 B) 
Host    
mvpauto.herokuapp.com
User-Agent      Mozilla/5.0 (Windows NT 10.0; …) Gecko/20100101 Firefox/55.0
Accept      text/html,application/xhtml+xm…plication/xml;q=0.9,*/*;q=0.8
Accept-Language     en-US,en;q=0.5
Accept-Encoding     gzip, deflate, br
DNT     1
Connection      keep-alive
Upgrade-Insecure-Requests       1
Cache-Control       max-age=0

这些是使用“heroku local”在本地成功运行时的标头

X-Powered-By        Express
Accept-Ranges       bytes
Cache-Control       public, max-age=0
Last-Modified       Sun, 01 Oct 2017 03:26:11 GMT
ETag        W/"17f-15ed5f847af"
Date        Sun, 01 Oct 2017 04:29:45 GMT
Connection      keep-alive

Request headers (439 B) 
Host        localhost:5000
User-Agent      Mozilla/5.0 (Windows NT 10.0; …) Gecko/20100101 Firefox/55.0
Accept    text/html,application/xhtml+xm…plication/xml;q=0.9,*/*;q=0.8
Accept-Language     en-US,en;q=0.5
Accept-Encoding     gzip, deflate
DNT     1
Connection      keep-alive
Upgrade-Insecure-Requests       1
If-Modified-Since       Sun, 01 Oct 2017 03:26:11 GMT
If-None-Match       W/"17f-15ed5f847af"
Cache-Control       max-age=0

然后是我的 index.js：

const express = require('express');
const app = express();
const db = require(__dirname + '/../database');
const bodyParser = require('body-parser');
const port = process.env.PORT || 3000;
const path = require('path');

app.use(express.static(path.resolve(__dirname + '/../client/dist')));
const router = require('./routes');    
app.use('/', router);
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/../client/dist/index.html');
});

app.listen(port, () => console.log('Listening on port ' + port));

我的 root('/') 端点没有任何 get 请求处理程序，因为在客户端，get 请求在加载时提交到 '/todos' 端点。我尝试添加一个“/”处理程序，并让根请求得到一个 res.sendFile('index.html')，这反过来又导致一个“禁止”消息。任何帮助将不胜感激。

【问题讨论】：

问题可能出在 server.js 代码上。
谢谢，克里沙。我添加了 server.js 代码以及一些关于我的故障排除的附加说明。
我希望这里提到的解决方案对您有所帮助。 stackoverflow.com/questions/25463423/res-sendfile-absolute-path
谢谢。我刚刚发现了问题，即我的 server.js 文件位于应用程序 repo 和 heroku 根目录中的单独服务器文件夹中，这是我从观察中收集到的，因为我在他们的文件中找不到任何这些文档，也没有在其他地方在线讨论。当尝试访问位于服务器目录兄弟文件夹中的客户端文件时，这尤其成问题。
祝贺@Quilty Kim 找到解决方案并感谢您发布您的发现

标签： node.js reactjs heroku

【解决方案1】：

我刚刚发现了问题，即我的 server.js 文件位于应用程序存储库根目录中的单独服务器文件夹中。当尝试访问位于服务器目录的同级文件夹中的客户端文件时，这变得特别成问题，因为遍历客户端目录的唯一方法是通过共享父级，我没有访问权限到。这一切都是从观察和运行'heroku run ls ~'中收集的，因为我在他们的文档中找不到任何这些，也没有在其他地方在线讨论过。

【讨论】：