-1

In a Vue app that I'm starting to build, which uses Vue from the CDN, I cannot get past the console error:

Access to script at 'file:///C:/files/development/vue/reading_schedule/json/books.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

<!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">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
       <div>{{ title }}</div>
    </div>

    <script type="module">
        import * as books from './json/books.json';

        new Vue ({
            el: "#app",
            data() {
                return {
                    title: 'Reading Schedule'
                }
            },
            created() {
                document.title = this.title;
                // console.log(books);
            },
            methods: {

            }
        });
    </script>
</body>
</html>

My Vue app development experience thus far has been creating apps in the Vue CLI and importing JSON into those is straightforward and without CORS policy console errors.

Is it possible to get the above code to work somehow?

knot22
  • 2,648
  • 5
  • 31
  • 51

1 Answers1

-1

You can use a plugin for development:

https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

But it would be recommended that you would configure an api endpoint that actually sends the cors headers. See:

https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3

D4NT3
  • 141
  • 7
  • The second link applies to Vue projects created using Vue CLI. Is there a way to configure an API endpoint in a Vue app that uses the CDN? Looking for a way to do this to avoid using a plugin. – knot22 Sep 20 '21 at 21:57