frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【ES6】import/exportがchromeで動作しない原因

スポンサードリンク


スポンサードリンク


ローカルファイルでES6の機能import / exportをテストしたところ下記エラーが出ました。

Access to script at '該当のパス' from origin 'null' has been blocked by CORS policy: The response is invalid.

CORSエラーとは

CORSとはCross-Origin Resource Sharingの頭文字を取ったもので
CORS policy: The response is invalid.
は外部のファイルを読み込む際に制限がかかっている状態です。

chromeではローカルの静的ファイルをimportで読み込む際に制限がかかり読み込めない仕様のようです。

解決策1

どうしてもローカルで試したい場合は、firefoxで動作しますのでfirefoxを利用します。

解決策2

xamppでサーバーをローカルに立てて利用したところエラーは出ませんでした。
そのためもちろんサーバーにあげてしまえばimport/exportが利用できることがわかります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script type="module" src="main.js"></script>
</html>

簡単なimport/export例

ついでではありますが、簡単なimport/export例を書いておきます。
こちらを張り付けてES6の機能import/exportを体感してみましょう。

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script type="module" src="main.js"></script>
</html>
import { hello } from './module.js';
hello();
export function hello() {
    alert('hello!');
}