web-dev-qa-db-ja.com

Chrome 62 / Chrome Canary 64でのES6モジュールのサポート、ローカルで動作せず、CORSエラー

Index.html

<html>
    <head>
    <script type="module">
        import {answer} from './code.js'
        console.info("It's ${answer()} time!")
    </script>
    </head>
    <body>
    </body>
</html>

code.js

export function answer(){
    return 'module';
}

エラー：Origin 'null'から 'file：/// C：*******/es6/code.js'のスクリプトへのアクセスがCORSポリシーによってブロックされました：無効な応答。したがって、Origin 'null'はアクセスを許可されません。

Chromeはモジュールをサポートできると言い、ウェブ上で動作する例を見てきましたが、ダウンロードしたものをコピーしてローカルで実行すると、常に上記のエラーが発生します。 Babel、Webpackなどを使用したくない.

ChromeとChrome Canary。の両方でExperimental Web Platform機能フラグを有効にしようとしました。

javascriptgoogle-chromemoduleecmascript-6same-origin-policy
26
mark pavlis

通常のスクリプトとは異なり、ES6モジュールは same-Origin policy の影響を受けます。これは、CORSヘッダー（ローカルファイルには設定できない）がなければ、ファイルシステムまたはクロスオリジンからそれらをimportできないことを意味します。

基本的に、このコードを（ローカル）サーバーから実行するか、テストのためにブラウザーでsame-Originを無効にする必要があります（これを永続的に行わないでください）。参照： 起源 'null'からのイメージへのアクセスはCORSポリシーによってブロックされました 。

30
Alexander O'Mara

私は同じ問題で実行し、es6コードをインポートしてブラウザのhtmlファイルで起動しようとしましたが、ブラウザコンソールでCORSエラーが発生しました。マシンにpythonがある場合、ローカルサーバーを作成する簡単な方法は次のとおりです。

python3 -m http.server 8001

作業中のフォルダーから。

1
Sydney C.