Docker環境下でのangularからのhttp通信について

Question

前提・実現したいこと

現在フロントサーバー＋APIサーバー＋MySQLサーバーをそれぞれ別で構築し、
３つのサーバーを連結して１つのシステムとなるような仕組みを勉強しています。

その中でフロント→APIサーバーへのリクエスト時に下記のエラーが発生しました。
いくつか検索して試したのですが対応方法が分からずお知恵を貸していただけると幸いです。

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

ChromeのDevToolsにて下記表示

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

エラー内容をみるにXHRはサポートしていないよ。
HTTPなどで試してねということだと思っています。
ただXHRはjsからHTTP通信を行うものという理解なので、
厳密には違うからできないよというエラーなのでしょうか。
このようなやり方をされているサイトがいくつもあったので不思議に思っています。

該当のソースコード(フロント)

Dockerコンテナ上に配置

function assetsgetCtrl($scope, $http) {
    $scope.test = function(){
        var send = {
            name: "test"
        }
        console.log("通信開始");
        $http({
            method: 'GET',
            url: 'localhost:30010/asset',
            // contentType: 'application/JSON',
            headers: {
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': "*",
                'Accept': 'application/json'
            },
            data: send
        }).then(function DoneCallback(res){
            console.log("通信成功");
            console.log(res);
        },function failCallback(res){
            console.log("通信失敗");
        });
    }
  }

該当のソースコード(API)

Dockerコンテナ上に配置(フロントとは違うコンテナ)

var exp = require("express");
var app = exp();

var mysql = require("mysql");

var connection = mysql.createConnection({
    host: "host.docker.internal",
    user: "***",
    password: "***",
    database: "***"
});

app.get("/",function(req,res){
    res.send("Hello-Worldaaa");
})

app.get("/asset", function (req, res) {
    connection.query('select * from tams.MST_ASSET', function (error, results, fields) {
        if (error) throw error;
        res.header("Access-Control-Allow-Origin", "*");
        res.send(results);
    });
});

// CORSを許可する
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.listen(3001,function(){
    console.log("成功")
})

試したこと

• APIサーバーのURL直叩きは問題なし
• API実行時にAccess-Control-Allow-Originを追加(現在のソースの状況)
• safariなどの別ブラウザでの実施(Chromeが原因との記事もあったため)
• APIサーバーと違うポートで実施(同じエラーだったのでフロント側の問題？)

補足情報（FW/ツールのバージョンなど）

フロント

• Dockerコンテナ上でサーバー起動
• angularJS
• localhost:8080
• gulpにてサーバー起動

API

• Dockerコンテナ上でサーバー起動
• express
• localhost:3001
• nodeにてサーバー起動

PC環境

• MACOS Catalina 15.17

Comments

[hoshi-takanori]

CORS 対応が必要です。
https://javascript.keicode.com/newjs/what-is-cors.php

[sky123]

ありがとうございます。上記サイトで改めて勉強させていただきました。
非常にわかりやすいサイトでした。
自分のサーバー側ではプリフライトを受ける体勢が整っていなかったようです。

Answer 1

$http({
    method: 'GET',
    url: 'localhost:30010/asset',
    // contentType: 'application/JSON',
    headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': "*",
        'Accept': 'application/json'
    },
    data: send
})

url: 'localhost:30010/asset'の部分の頭にhttp://がついていないので、「CORSに対応していないスキーマだよ」というエラーが出てるのではないかと推測します。

Comments

[sky123]

ありがとうございます。解決しました。
とんだ凡ミスでした。。。