admin管理员组

文章数量:1026989

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';
}

Error: Access to Script at 'file:///C:*******/es6/code.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

Chrome says it can support modules and I have seen examples working on the web, but when I copy them of download and run them locally, I always get the error above. I do not want to use Babel, Webpack, etc.

I have tried enabling the Experimental Web Platform features flag in both Chrome and Chrome Canary.

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';
}

Error: Access to Script at 'file:///C:*******/es6/code.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

Chrome says it can support modules and I have seen examples working on the web, but when I copy them of download and run them locally, I always get the error above. I do not want to use Babel, Webpack, etc.

I have tried enabling the Experimental Web Platform features flag in both Chrome and Chrome Canary.

  • javascript
  • google-chrome
  • module
  • ecmascript-6
  • same-origin-policy
Share Improve this question edited Oct 28, 2017 at 17:39 Alexander O'Mara 60.5k19 gold badges172 silver badges181 bronze badges asked Oct 28, 2017 at 17:21 mark pavlismark pavlis 7321 gold badge5 silver badges9 bronze badges
Add a comment  | 

4 Answers 4

Reset to default 59

Unlike regular scripts, ES6 modules are subject to same-origin policy. This means that you cannot import them from the file system or cross-origin without a CORS header (which cannot be set for local files).

Basically you need to run this code from a (local) server or disable same-origin in the browser for testing (do not do this permanently). See: Access to Image from origin 'null' has been blocked by CORS policy.

I've run in the same problem, trying to import es6 code to launch in a html file in my browser, getting CORS errors in my browser console. If you have python on your machine one easy way to create a local server is to:

python3 -m http.server 8001

From the folder your are working in.

Issue

Resolution

Looks like you're trying to open the web-page locally (via file:// protocol) i.e. double clicking the .html file. Unfortunately modules only work via HTTP(s), so all you need to do is use a local web server. Popular choices include:

  • Live Server, a VS Code extension that adds a right-click option to run your pages with a local server.

  • Node static server, a simple http server to serve static resource files from a local directory.

  • Node live server is easy to install and use:

  • Lite-Server: BrowserSync does most of what we want in a super fast lightweight development server. It serves the static content, detects changes, refreshes the browser, and offers many customizations.

    npm install -g live-server // Install globally via npm

live-server                // Run in the html's directory

Or even shorter and without altering your packages:

npx live-server

You can run any chromium based browser with the --allow-file-access-from-files flag to make importing from modules work locally through the file:// protocol.

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';
}

Error: Access to Script at 'file:///C:*******/es6/code.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

Chrome says it can support modules and I have seen examples working on the web, but when I copy them of download and run them locally, I always get the error above. I do not want to use Babel, Webpack, etc.

I have tried enabling the Experimental Web Platform features flag in both Chrome and Chrome Canary.

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';
}

Error: Access to Script at 'file:///C:*******/es6/code.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

Chrome says it can support modules and I have seen examples working on the web, but when I copy them of download and run them locally, I always get the error above. I do not want to use Babel, Webpack, etc.

I have tried enabling the Experimental Web Platform features flag in both Chrome and Chrome Canary.

  • javascript
  • google-chrome
  • module
  • ecmascript-6
  • same-origin-policy
Share Improve this question edited Oct 28, 2017 at 17:39 Alexander O'Mara 60.5k19 gold badges172 silver badges181 bronze badges asked Oct 28, 2017 at 17:21 mark pavlismark pavlis 7321 gold badge5 silver badges9 bronze badges
Add a comment  | 

4 Answers 4

Reset to default 59

Unlike regular scripts, ES6 modules are subject to same-origin policy. This means that you cannot import them from the file system or cross-origin without a CORS header (which cannot be set for local files).

Basically you need to run this code from a (local) server or disable same-origin in the browser for testing (do not do this permanently). See: Access to Image from origin 'null' has been blocked by CORS policy.

I've run in the same problem, trying to import es6 code to launch in a html file in my browser, getting CORS errors in my browser console. If you have python on your machine one easy way to create a local server is to:

python3 -m http.server 8001

From the folder your are working in.

Issue

Resolution

Looks like you're trying to open the web-page locally (via file:// protocol) i.e. double clicking the .html file. Unfortunately modules only work via HTTP(s), so all you need to do is use a local web server. Popular choices include:

  • Live Server, a VS Code extension that adds a right-click option to run your pages with a local server.

  • Node static server, a simple http server to serve static resource files from a local directory.

  • Node live server is easy to install and use:

  • Lite-Server: BrowserSync does most of what we want in a super fast lightweight development server. It serves the static content, detects changes, refreshes the browser, and offers many customizations.

    npm install -g live-server // Install globally via npm

live-server                // Run in the html's directory

Or even shorter and without altering your packages:

npx live-server

You can run any chromium based browser with the --allow-file-access-from-files flag to make importing from modules work locally through the file:// protocol.

本文标签：

版权声明：本文标题：javascript - ES6 module support in Chrome 62Chrome Canary 64, does not work locally, CORS error - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1737142536a1446965.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。