매니페스트: 행: 1, 열: 1, 구문 오류
호스트 URL https://serviceworkerspike.azurewebsites.net/ - 더 이상 작동하지 않습니다.
학교 프로젝트로 Vuejs를 사용하여 PWA를 만들고 있는데, Azure에서 웹사이트를 호스팅할 때마다 localhost에 문제가 없습니다.Chrome devtools는 다음과 같이 응답합니다.
/manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
/manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
manifest.json:1 GET https://serviceworkerspike.azurewebsites.net/manifest.json 404
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
인덱스에 추가되어 있습니다.html:
<link rel="manifest" href="/manifest.json">
manifest.json 파일은 다음과 같습니다.
{
"name": "MessageBoardUCN",
"short_name": "MessageBoardUCN",
"theme_color": "#ff095a",
"background_color": "#feaaee",
"display": "standalone",
"start_url": "/index.html",
"icons": [
{
"src": "images/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
이름 및 단축 이름 속성을 다음과 같이 수행하려고 했습니다: "messeboarducn"
또한 starturl을 호스트 URL인 "https://serviceworkerspike.azurewebsites.net/"과 "/"로 편집해 보았습니다.
루트 디렉토리 및 /src 디렉토리로 manifest.json 파일을 이동하려고 했지만 다른 가이드에 따르면 index.html과 같은 폴더에 있어야 하며 /public은 기본입니다.
보통 Vuejs에는 web.config 파일이 없지만 다음과 같은 파일을 추가하려고 했습니다.
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".json" />
<mimeMap fileExtension=".json" mimeType="application/json" />
<mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
</staticContent>
</system.webServer>
</configuration>
어떻게 하면 실수를 고칠 수 있을까요?
매니페스트 파일이 root 수준(index.html이 있는 곳)에 있는 경우 다음과 같이 참조할 수 있습니다.<head>index.filename 파일의 태그:
<link rel="manifest" crossorigin="use-credentials" href="manifest.json"/>
매니페스트 파일의 startUrl은 다음과 같아야 합니다.
"start_url": "/"
루트를 시작점으로 지정하면 됩니다.
그렇지 않으면 특정 기본 URL을 사용하여 앱에 서비스를 제공하는 경우 startUrl 속성에 반영해야 합니다.
Example:
--> www.myapp.com/my-other-url-part/
Use:
"start_url": "/my-other-url-part/"
Or simply:
"start_url": "./" <-- This would match any base-href != "/"
그런 다음 index.html 파일을 자동으로 처리하도록 웹 서버를 설정해야 합니다(이는 보통 기본값별로 실행됩니다).
수정은 매우 간단합니다.index.html의 코드 orgnizing 문제일 뿐입니다.다음 링크 태그는 favicon generator에서 복사된 몇 개 위에 있어야 합니다.메타 태그만 하면 됩니다.
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
(Azure Windows Web Service에서도) 똑같은 문제가 발생했습니다.루트 폴더에 다음 내용으로 새 web.config를 만들었습니다(또는 기존 내용이 있는 경우 편집).
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
</configuration>
그러면 json 파일의 MIME 구성이 추가됩니다.
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />index.display 헤더 파일에서 이 행을 삭제하거나 공용 디렉토리 내에 manifest.json 파일을 만듭니다.
다음 두 가지를 설정해야 했습니다.
%PUBLIC_URL%index.manifest의 href:<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />homepage합니다."json" :"homepage": "https://example.com/myapp",
매니페스트 파일 형식을 확인합니다.UNIX/Unicode UTF-8 no BOM을 사용했을 때 이 오류가 발생하였습니다.DOS/Unicode UTF-8 no BOM으로 변경 후 오류가 사라졌습니다.파일 형식은 모든 고급 코드 편집기에서 확인 및 변경할 수 있습니다.정확히 뭐가 문제였는지는 모르겠지만 아마 호스팅 회사에 따라 다를 거예요.헥사 에디터로 파일을 비교해보니 시각적으로 동일한 것 같습니다.
Azure cloud를 사용하고 있는 것은 알고 있습니다만, AWS Amplify에서도 같은 문제가 있었습니다.이 문제를 해결하기 위한 스텝은 다음과 같습니다.
앰프 콘솔로 이동합니다.
문제를 나타내는 애플리케이션을 선택합니다.
왼쪽 패널에서 다시 쓰기 및 리디렉션 옵션을 선택하십시오.
애플리케이션의 리다이렉션 규칙이 표시됩니다.편집 옵션을 선택하십시오.
이 구조의 행을 찾습니다.
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>.
- 다음 시간 후에 확장자 webmanifest 추가
json코드는 다음과 같습니다.
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|webmanifest)$)([^.]+$)/>.
- 저장을 누르고 사이트를 다시 검사합니다.
프로젝트에서 Apache를 사용하는 경우 .htaces 파일을 편집하고 다음 섹션에 webmanifest 확장자를 포함합니다.
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js|webmanifest)$">
Header set Access-Control-Allow-Origin "https://your-url"
</FilesMatch>
</IfModule>이 설정은 불필요한 악의적인 확장을 방지하는 데 도움이 될 것입니다.
webconfig에 json mimtype을 추가하여 오류를 수정했습니다.asp.net 코드가 MIME을 허용하지 않았습니다.기본적으로 json을 입력하여 서비스를 제공합니다.
<system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
나도 같은 문제가 있었는데 해결됐어.app.js express 백엔드 폴더에 index.html 파일을 잘못 넣었습니다.
**(app.use(path.static(path.static(_path.static(_pathname),../frontend/build/index.static"))**
제거 후 정상적으로 동작합니다.코드는 다음과 같습니다.
if(process.env).NODE_ENV === 'development') {app.use(path.static(path.static(_developmentname),../frontend/build")};
app.getfil*", (req, res) => {res.sendFile(path.resolve(_dirname),../frontend/build/index.html") ; } ; }
이 "" " " " " " "site.webmanifest웹 서버 또는 CDN에 의해 차단되었을 수 있습니다.단, 간단한 회피책이 있습니다만, 이 문제의 원인이 무엇인지 아직 알 수 없습니다.만 .site.webmanifest로로 합니다.manifest.json링크 태그를 갱신합니다.
<link rel="manifest" href="/favicons/manifest.json">
합니다.<base href=""/>
이 행은 index.html에 코멘트할 수 있습니다.나중에 고마워.
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
주의: manifest.json은 Android의 홈스크린에 웹 앱을 추가할 때 사용하는 메타데이터를 제공합니다.
언급URL : https://stackoverflow.com/questions/59068699/manifest-line-1-column-1-syntax-error
'programing' 카테고리의 다른 글
| 기능에 대한 Jest Spy (0) | 2023.02.27 |
|---|---|
| 노드 js를 사용하여 html 파일을 실행하는 방법 (0) | 2023.02.27 |
| base64 문자열을 이미지로 변환 (0) | 2023.02.27 |
| 객체 배열을 정의하려면 어떻게 해야 합니까? (0) | 2023.02.22 |
| React의 레스트 소품용 TypeScript 회피책 (0) | 2023.02.22 |