Django 清单:行:1,列:1,Chrome浏览器上的语法错误
我有一个通过npm运行构建的react应用程序。从前端到后端的GET和POST请求的状态为200,但我遇到了一个奇怪的错误,可能会导致我的文件中的所有图像都不会出现在本地主机上 我已经尝试重新安装节点,添加了“manifest\u version”:2,因为它是chrome manifest的当前版本 清单:行:1,列:1,语法错误。 下面是我的index.html文件Django 清单:行:1,列:1,Chrome浏览器上的语法错误,django,reactjs,google-chrome,npm,manifest.json,Django,Reactjs,Google Chrome,Npm,Manifest.json,我有一个通过npm运行构建的react应用程序。从前端到后端的GET和POST请求的状态为200,但我遇到了一个奇怪的错误,可能会导致我的文件中的所有图像都不会出现在本地主机上 我已经尝试重新安装节点,添加了“manifest\u version”:2,因为它是chrome manifest的当前版本 清单:行:1,列:1,语法错误。 下面是我的index.html文件 <!doctype html> <html lang="en"> <head>
<!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>
Django React样板
您需要启用JavaScript才能运行此应用程序。
! 功能(l){
职能e(e){
对于(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f
错误似乎是从index.html文件的开头开始的。当我将Codesandbox项目移动到本地时,我也遇到了同样的问题。在我的例子中,
public
文件夹中没有manifest.json
文件。
我通过添加默认的manifest.json
解决了这个问题,该create-react-app
生成:
{
"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"
}
我在运行我的应用程序时遇到了同样的问题(“清单:行:1,列:1,语法错误”)(带有react router的react应用程序,与AWS Amplify一起发布)
通过执行以下操作解决了我的问题:
在“重写和重定向”中,确保在以下行中有“json”:
Source address:
</^[^.]+$|\.(?!(css|gif|ico|json|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address:
/index.html
Type:
200 (Rewrite)
源地址:
目标地址:
/index.html
类型:
200(重写)
上述解决方案还修复了生产中不工作的react路由器链路的问题,如以下线程中所述:
下面是我的个人项目,修复了manifest.json问题,以及非工作的react路由器问题(在本例中是指向一些随机代码片段的链接-fibonacci备忘录):
VladS回答解决了我的问题。 我还在Angular应用程序中使用AWS放大控制台 您还可以查看清单文件响应头中的内容类型。它不应该是
text/html
。如果是,则必须更改服务器配置,以便以正确的内容类型提供文件
Angular将清单文件命名为“Manifest.webmanifest”。
因此,我还必须转到放大控制台中的“重写和重定向”页面,编辑现有条目,如下所示:
Source address
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|json|webmanifest)$)([^.]+$)/>
源地址
(我添加了json | webmanifest)当我为我的一个只支持开发人员的页面添加密码保护时,我突然开始出现“manifest line 1 column 1 syntax error”(manifest.json)错误 我还使用AWS Amplify和Create React应用程序来构建我的应用程序。我尝试了上面所有的解决方案,但没有任何帮助 有一件事确实有用,那就是在我的index.html中添加一个属性到指向我的manifest.json的链接 为了解决这个问题,我添加了
crossorigin=“use credentials”
*,如下所示:
<link crossorigin="use-credentials" rel="manifest" href="./manifest.json" />
您的应用程序托管在哪里?我曾经有过同样的错误,但最后发现这是因为我打开了GCP上的IAP,阻止了它正确加载。我正在使用django manage.py runserver脚本。在上托管我的网站。我也有心脏病