reactjs IPFS上承载的React应用程序提供“default-src 'self'”,未显式设置“connect-src”,因此将“default-src”用作回退错误

xkrw2x1b  于 2023-01-25  发布在  React
关注(0)|答案(1)|浏览(274)

我在这里有一个react应用程序https://github.com/ChristianOConnor/spheron-react-api-stack。我尝试在IPFS上托管它。我通过2个主要步骤部署了这个应用程序:1)cd frontendnpm 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标记。

68bkxrlz

68bkxrlz1#

问题可能是另一个组件在响应标头中设置了另一个Content-Security-Policy。在 meta标记中添加另一个CSP只能使总体策略更加严格。您需要标识标头的设置位置,并修改或删除该标头,而不是添加元标记。

相关问题