Railsで自前のAPIをJSでローカル環境で取得しようとすると、クロスドメインによるエラーがでる

前提・実現したいこと

現在、Railsアプリを制作中で、RailsのAPIモードを実装し、jsonを出力できるところまではできています。
同アプリで、とあるぺージにアクセスしたら、JS側でそのAPIを叩いて、値をJS側で取得したいというのが実現したいことになります。
(この値をvue.jsで使うことを考えているので、JS側で取得したい。)
現在はローカル環境で開発中なのですが、下記のようなエラーが出ております。

発生している問題・エラーメッセージ

Access to XMLHttpRequest at 'localhost:3000/api/archiveus' from origin 'http://localhost:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

該当のソースコード

javascript
1    console.log("hoge")
2    var url = location.host;
3    console.log(url);
4    var api_url = "/api/archiveus";
5    var fullurl = url + api_url;
6    console.log(fullurl);
7
8    var request = new XMLHttpRequest();
9
10    request.open('GET', fullurl, true);
11    request.responseType = 'json';
12
13    request.onload = function() {
14        var data = this.response;
15        console.log(data);
16    };
17
18    request.send();

やったこと、原因等、推測

・現在ローカル環境で開発しており、https化されていないので、フロント側からアクセスできない？
・rails側からなら値を取得できるようなのですが、この値をvue.jsで使うことを考えているので、JS側で取得したい。
・Access Control-Allow-Originというchromeの拡張機能を使用してみたが、変わらず。
・アプリ側で許可すれば、アクセスできるようなのですが、方法が分からず…
・https://qiita.com/terufumi1122/items/39b2a3659bc585c07f64の記事も試してみましたが、変わらず。

原因はなんとなくは分かってはいるのですが、解決方法がわからない状況です。アドバイス等いただければと思います。よろしくお願いします。