[Laravel] Font Awesome이 동일한 소스 정책에서 로드되지 않을 때의 해결 방법

처음으로 Laravel을 배포했을 때 Font Awesome에서 조금 막혔기 때문에 메모.

오류 내용

이하의 기사를 참고로 Laravel Mix를 이용해 Font Awesome을 도입했지만, Heroku에 배포해 보면 프로덕션 환경만 Font Awesome가 읽히지 않는 에러에 조우.
ぇtps://레아도 bぇ. 이 m/ぁらゔぇl/5.8/쟈/미 x. HTML
htps : // 코 m/아리_또한/있어 ms/5d2 베후아 8f367050아아

에러문에는 이하와 같은 표시가 되어 있다.


브라우저(http://~)로부터 자서버에 두고 있는 폰트 파일(https://~)을 읽을 때에 http와 https의 차이에 의해 크로스 오리진이 되어 버려, 브라우저측에서 에러가 나오고 있다.

어째서(･_･?)

해결 방법 1

폰트 파일에 액세스 할 때 크로스 오리진을 허용하는 방법.

Laravel Mix를 사용한 경우, 다음 디렉토리에 폰트 파일이 저장됩니다. 그래서, 이 폰트 파일에의 액세스를 허가해 주면 된다.


.htaccess 파일에 의해 이 폰트 파일군에의 크로스 오리진 액세스를 허가합니다.
위의 fonts 디렉토리 바로 아래에 .htaccess 파일을 만들고 다음과 같이 설명합니다.

public/fonts/.htaccess

<FilesMatch "\.(ttf|svg|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

확장자를 지정하여 글꼴 파일에 대한 제약을 해제합니다.
이를 다시 배포하면 글꼴 파일이 로드됩니다.

그래도 표시되지 않는 경우는 브라우저의 캐시가 남아 있다고 표시되지 않는 경우가 있으므로 아래의 기사를 참고로 캐시를 클리어.
h tps : // 테키와 스타 ぇ. 메 / 코 m s / ぁ 라 ゔ ぇ l 〇 s 짱 s # 3_ ぁ 라 ゔ l

해결 방법 2

https에 통일하여 크로스 오리진이 되지 않게 하는 방법. 이쪽이 근본적인 해결 방법이 된다.

heroku는 기본적으로 https가 활성화되어 있을 것인데 앱 내에 생성된 링크를 보면 http로 되어 있다.
아래의 링크에서는 패스의 생성에 route() 를 사용하고 있지만, 생성된 패스가 http가 되어 버리고 있다.
그 때문에, 링크로부터 천이하면 브라우저의 표시가 http가 되어 버려, 크로스 오리진이 되어 버린다.



참고 기사 에 의하면, 다음과 같이 AppServiceProvider.php에 추기하는 것으로 프로덕션 환경만 https를 강제할 수 있다.

app/Providers/AppServiceProvider.php

    public function boot()
    {
       // 本番環境(Heroku)でhttpsを強制する
       if (\App::environment('production')) {
           \URL::forceScheme('https');
    }

이렇게 하면 생성된 링크가 https가 되므로 크로스 오리진이 사라지고 글꼴 파일이 로드됩니다.

참고

다른 도메인에서 파일을 읽으려고하면 화가났습니다.
XHR2에서 하위 도메인 와일드카드 Origin에 CORS를 허용하는 설정 외.
Laravel5.7: Heroku에 배포