我在这里有一个react应用程序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"
。但仍存在一个问题。
react网站加载刚刚好。
但是当我点击"点击这个来调用API"按钮时,我在我的控制台中得到了这个。
错误为:拒绝连接到"https://〈我的API的域名〉/hello",因为它违反了以下内容安全策略指令:"default-src 'self'"。请注意,应用程序tsx:17未显式设置"connect-src",因此使用"default-src"作为后备。
我尝试在build
目录根目录下创建的index.html
文件中使用meta标签来修复此问题。
<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" />
。我将这个build文件夹重新部署到IPFS,当我单击"click this to call API"按钮时,得到了完全相同的错误。那么我做错了什么呢?我将default-src和connect-src添加到了meta标记。
1条答案
按热度按时间68bkxrlz1#
问题可能是另一个组件在响应标头中设置了另一个Content-Security-Policy。在 meta标记中添加另一个CSP只能使总体策略更加严格。您需要标识标头的设置位置,并修改或删除该标头,而不是添加元标记。