[英]React app hosted on IPFS gives "default-src 'self'". 'connect-src' was not explicitly set, so 'default-src' is used as a fallback error
我在这里有一个反应应用程序https://github.com/ChristianOConnor/spheron-react-api-stack 。 我正在尝试将其托管在 IPFS 上。 我通过 2 个主要步骤部署它：1) cd frontend ， npm run build和 2) 将build文件夹上传到 pinata.cloud。 在 IPFS 上运行之前，我必须进行一些更改，例如将 manifest.json 中的路径转换为包含./ ，例如我更改了"main.js": "/static/js/main.HASH_HERE.js" , 到"main.js": "./static/js/main.HASH_HERE.js" 。 但是仍然存在1个问题。
反应站点加载得很好。
但是，当我单击“单击此调用 API”按钮时，我会在控制台中看到它。
错误是：拒绝连接到 'https://<MY API'S DOMAIN NAME>/hello' 因为它违反了以下内容安全策略指令：“default-src 'self'”。 请注意，App.tsx: 17 'connect-src' 未明确设置，因此 'default-src' 用作后备。
我试图通过在build目录的根目录中创建的index.html文件中的元标记来修复此问题。 现在看起来像这样：
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src https://<MY API'S DOMAIN NAME>/hello" />
<meta charset="utf-8" />
<link rel="icon" href="./favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="./logo192.png" />
<link rel="manifest" href="./manifest.json" />
<title>React App</title>
<script defer="defer" src="./static/js/main.<HASH HERE>.js"></script>
<link href="./static/css/main.<HASH HERE>.css" rel="stylesheet">
</head>
注意上面代码中<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src https://<MY API'S DOMAIN NAME>/hello" /> 。 我将此构建文件夹重新部署到 IPFS，并在单击“单击此调用 API”按钮时得到完全相同的错误。 那我做错了什么？ 我将 default-src 和 connect-src 添加到元标记。
问题很可能是另一个组件在响应 header 中设置了另一个 Content-Security-Policy。 在元标记中添加另一个 CSP 只能使总体政策更加严格。 您将需要确定 header 的设置位置并修改或删除该 header，而不是添加元标记。
React Router - 内容安全策略指令：“default-src 'self'
[英]React Router - Content Security Policy directive: "default-src 'self'
如何为 React 应用程序修复 Content Security Policy default-src: none ？
[英]How can Content Security Policy default-src: none can be fixed for a React app?
为什么我在设置 express-csp-header 后在 React PWA 应用程序上收到“default-src: 'none'”内容安全策略错误？
[英]Why do I get the "default-src: 'none'" Content Security Policy error on React PWA app after I've set up express-csp-header?
在 React 中提交失败的表单时显示 default-src 内容安全策略错误
[英]default-src Content Security Policy errors showing on failed form submit in React
错误：拒绝加载脚本，因为它违反了以下内容安全策略指令：“default-src 'none'”
[英]Error: Refused to load the script because it violates the following Content Security Policy directive: "default-src 'none'"
拒绝加载字体 'data:font/woff.....' 它违反了以下内容安全策略指令：“default-src 'self'”。 请注意，“字体源”
[英]Refused to load the font 'data:font/woff.....'it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src'
拒绝加载图像，因为它违反了以下内容安全策略指令：“default-src 'none'”
[英]Refused to load the image because it violates the following Content Security Policy directive: “default-src 'none'”
拒绝加载 * 因为它既没有出现在 img-src 指令中，也没有出现在 Content Security Policy 的 default-src 指令中
[英]Refused to load * because it appears in neither the img-src directive nor the default-src directive of the Content Security Policy
要在 TS 中使用的 SCSS 导出的汇总构建失败（[:] 错误。'default' 不是由 src/styles/variables.scss 导出的）
[英]Rollup Build failure for SCSS exports to be used in TS ( [!] Error: 'default' is not exported by src/styles/variables.scss )
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.