清单：行：1，列：1，Chrome 浏览器上的语法错误
Posted
技术标签:
【中文标题】清单：行：1，列：1，Chrome 浏览器上的语法错误【英文标题】：Manifest: Line: 1, column: 1, Syntax error on Chrome browser 【发布时间】：2019-12-16 19:02:32 【问题描述】：我有一个通过 npm run build 构建的 react 应用程序。从前端到后端的 GET 和 POST 请求给出状态 200，但我收到一个奇怪的错误，可能导致我文件中的所有图像都没有出现在 localhost 上。
我已经尝试重新安装节点，添加 'manifest_version': 2 因为它是当前版本的 chrome manifest。
Click here for inspect screenshot
清单：行：1，列：1，语法错误。 下面是我的 index.html 文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<title>Django React Boilerplate</title>
<link href="/static/css/2.87ad9c80.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable javascript to run this app.</noscript>
<div id="root"></div>
<script>
! function(l)
function e(e)
for (var r, t, n = e[0], o = e[1], u = e[2], f = 0, i = []; f < n.length; f++) t = n[f], p[t] && i.push(p[t][0]), p[t] = 0;
for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (l[r] = o[r]);
for (s && s(e); i.length;) i.shift()();
return c.push.apply(c, u || []), a()
function a()
for (var e, r = 0; r < c.length; r++)
for (var t = c[r], n = !0, o = 1; o < t.length; o++)
var u = t[o];
0 !== p[u] && (n = !1)
n && (c.splice(r--, 1), e = f(f.s = t[0]))
return e
var t = ,
p =
1: 0
,
c = [];
function f(e)
if (t[e]) return t[e].exports;
var r = t[e] =
i: e,
l: !1,
exports:
;
return l[e].call(r.exports, r, r.exports, f), r.l = !0, r.exports
f.m = l, f.c = t, f.d = function(e, r, t)
f.o(e, r) || Object.defineProperty(e, r,
enumerable: !0,
get: t
)
, f.r = function(e)
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag,
value: "Module"
), Object.defineProperty(e, "__esModule",
value: !0
)
, f.t = function(r, e)
if (1 & e && (r = f(r)), 8 & e) return r;
if (4 & e && "object" == typeof r && r && r.__esModule) return r;
var t = Object.create(null);
if (f.r(t), Object.defineProperty(t, "default",
enumerable: !0,
value: r
), 2 & e && "string" != typeof r)
for (var n in r) f.d(t, n, function(e)
return r[e]
.bind(null, n));
return t
, f.n = function(e)
var r = e && e.__esModule ? function()
return e.default
: function()
return e
;
return f.d(r, "a", r), r
, f.o = function(e, r)
return Object.prototype.hasOwnProperty.call(e, r)
, f.p = "/";
var r = window.webpackJsonp = window.webpackJsonp || [],
n = r.push.bind(r);
r.push = e, r = r.slice();
for (var o = 0; o < r.length; o++) e(r[o]);
var s = n;
a()
([])
</script>
<script src="/static/js/2.e5ee7667.chunk.js"></script>
<script src="/static/js/main.9f678b97.chunk.js"></script>
</body>
</html>
似乎错误从我的 index.html 文件的开头开始。
【问题讨论】：
您在哪里托管您的应用程序？我曾经遇到过同样的错误，最后发现是因为我在 GCP 上打开了 IAP 导致无法正确加载。 我正在使用 django manage.py runserver 脚本。在127.0.0.1:8000 上托管我的网站。而且我还启用了 CORS。 错误说明了什么？ @zixuan 检查上面的链接以获取屏幕截图。这是我的问题的标题。 也许改用<!DOCTYPE html>?
【参考方案1】：
当我将 Codesandbox 项目移动到本地时，我遇到了同样的问题。就我而言，public 文件夹中没有 manifest.json 文件。
我通过添加create-react-app 生成的默认manifest.json 来解决它：
"short_name": "CloseWeUI",
"name": "The front-end UI for CloseWe",
"icons": [
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
【讨论】：
谢谢，我认为这是我的问题。我没有将我的公用文件夹推送到 Heroku。【参考方案2】：在运行我的应用程序（使用 react-router 反应应用程序，使用 AWS Amplify 发布）时，我遇到了同样的问题（“Manifest: Line: 1, column: 1, Syntax error”）。
通过执行以下操作解决了我的问题： 在“重写和重定向”中，确保您在以下行中有“json”：
Source address:
</^[^.]+$|\.(?!(css|gif|ico|json|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address:
/index.html
Type:
200 (Rewrite)
上述解决方案还解决了生产中非工作 react-router 链接的问题，因为它在以下线程中报告： React Router DOM not working correctly on Amplify Console AWS
这是我的个人项目，它修复了 manifest.json 问题，以及非工作的 react-router 问题（在这种情况下是一些随机代码 sn-p - fibonacci memoization 的链接）：
https://everhint.com/hintlink/algorithms/javascript/codesnippet/fibonacci/memoization/fibonacci-memoization/d01f275b-6acf-4f26-9448-e99939c9d4b7.html
【讨论】：
【参考方案3】：当我向我的开发人员专用页面添加密码保护时，我突然开始收到“manifest line 1 column 1 syntax error”(manifest.json) 错误。
我还使用 AWS Amplify 和 Create React App 来构建我的应用程序。我尝试了上述所有解决方案，但没有任何帮助。
有帮助的一件事是在 index.html 中的 manifest.json 链接中添加一个属性。
为了解决这个问题，我添加了crossorigin="use-credentials"*，如下所示：
<link crossorigin="use-credentials" rel="manifest" href="./manifest.json" />
【讨论】：
它适用于我，只需将此行添加到 index.html 的开头 太棒了，作品。添加crossorigin="use-credentials" 是否存在安全问题？【参考方案4】：
VladS 的回答解决了我的问题。 我还在为我的 Angular 应用程序使用 AWS Amplify 控制台。
您还可以查看清单文件响应标头中的 Content-Type。它不应该是text/html。如果是，您必须更改服务器配置才能以正确的 Content-Type 提供文件。 More info
Angular 将清单文件命名为“manifest.webmanifest”。 因此，我还必须转到 Amplify 控制台中的“重写和重定向”页面并编辑现有条目，如下所示：
Source address
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|json|webmanifest)$)([^.]+$)/>
（我添加了 json|webmanifest）
【讨论】：
【参考方案5】：你应该放
"homepage": "",
在您的 packaje.json 上。 它对我有用。
【讨论】：
以上是关于清单：行：1，列：1，Chrome 浏览器上的语法错误的主要内容，如果未能解决你的问题，请参考以下文章