[지도는 해결, woff는 아직] woff2 와 구글 맵 접근이 안되고 404가 나오는 이유가 뭘까요.
크롬 개발자 도구에서는 이렇게 네 줄이 나옵니다.
1) Failed to load resource: the server responded with a status of 404 (NOT FOUND)
: CWB0XYA8bzo0kSThX0UTuA.woff2
2) Failed to load resource: the server responded with a status of 404 (NOT FOUND)
: RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2
3) Failed to load resource: the server responded with a status of 403 (Forbidden)
: maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d37.63263734432162&2d126.69787078285708&2m2&1d37.680033613017244&2d126.84311741273075&2u15&4sen-GB&5e0&6sm%40386000000&7b0&8e0&callback=_xdc_._7cfwii&token=123746
4) Failed to load resource: the server responded with a status of 403 (Forbidden)
: AuthenticationService.Authenticate
구글 키는 작년 여름에 받은 것 같고 - 그때도 제가 하다 안돼서 남이 했습니다 - 그간 지도 관련 부분은 메뉴를 막아놔서 접근이 없었는데 필요한 부분을 다 열어 놓고 지도를 접근하려는데 저런 오류가 나옵니다. 위치 정보 허용했고 웹디렉토리 static/font에 woff2도 있습니다.
작년에 윈도우즈에서 저런 에러가 나와서 로컬에 설치했고..., 현재는 우분투를 쓰고 있습니다.
관련해서 Web Config를 고치라는 토픽이 많던데... 아래와 같이요.
<system.webServer> <staticContent> <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" /> <remove fileExtension=".woff" /> <remove fileExtension=".woff2" /> <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /> <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" /> </staticContent>
현재 아파치가 아니라 flask를 이용하고 있어서 어디를 손을 대야 할지를 모르겠습니다.
css에 font family를 넣어봐도 마찬가지 였습니다.
참고로 html 앞부분은 이렇게 돼있습니다(너무 길어서 보는 분들이 짜증날까봐...)
/<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MacroLog::{% block title %}{% endblock %}</title>
{#=== <link rel="shortcut icon" href="/favicon.ico" /> ===#}
<link rel="stylesheet" href="{{ url_for('static',filename='css/fileinput.min.css') }}" type="text/css" media="screen" title="photolog" charset="UTF-8" />
<link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}" type="text/css" media="screen" title="photolog" charset="UTF-8" />
<link rel="stylesheet" href="{{ url_for('static',filename='css/font-awesome.min.css') }}" type="text/css" media="screen" title="photolog" charset="UTF-8" />
<link rel="stylesheet" href="{{ url_for('static',filename='css/jasny-fileinput.css') }}" type="text/css" media="screen" title="photolog" charset="UTF-8" />
<link rel="stylesheet" href="{{ url_for('static',filename='css/placeholder-error.css') }}" type="text/css" media="screen" title="photolog" charset="UTF-8" />
<link rel="stylesheet" href="{{ url_for('static',filename='css/dhtmlx.css') }}" type="text/css" media="screen" title="photolog" charset="UTF-8" />
<link rel="stylesheet" href="{{ url_for('static',filename='css/roboto.css') }}" type="text/css" media="screen" title="photolog" charset="UTF-8" />
<link rel="stylesheet" href="{{ url_for('static',filename='css/jquery-ui.css') }}" type="text/css" media="screen" title="photolog" charset="UTF-8" >
<link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}" type="text/css" media="screen" title="photolog" charset="UTF-8" />
{#=== <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> ===#}
<!--[if lt IE 9]>
{#=== <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> ===#}
<![endif]-->
<script type="text/javascript" src="{{ url_for('static',filename='js/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/jquery-ui.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/bootbox.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/jasny-fileinput.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/google-map.js') }}?key=AIzaSyDtfoE_bOdwnSgB-gr1iyLx7sW_Sr1IC64"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/gmaps.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/exif.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/binaryajax.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/dhtmlx.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/jquery.cookie.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/moment.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static',filename='js/bootstrap-filestyle.min.js') }}"></script>
<style>
</style>지도는 상자만 나오고..., 소스에서 주는 기본 좌표에 깃발만 꼽고 전혀 지도가 그려지지 않습니다.
읽어주셔서 고맙습니다. 도와주세요. 끝.
일단 지도는 보입니다. "경고" 나오지만, 무시하고...
아래의 문장
<script type="text/javascript" src="{{ url_for('static',filename='js/google-map.js') }}?key=AIzaSyDtfoE_bOdwnSgB-gr1iyLx7sW_Sr1IC64"></script>
을 아래의 문장으로
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
바꾸니 지도는 보입니다. woff2만 남았네요. -.-
댓글 달기