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

前提・実現したいこと

現在フロントサーバー＋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

hoshi-takanori

2021/05/01 12:20

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

sky123

2021/05/06 13:08

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

行動規範の内容に同意します

回答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に対応していないスキーマだよ」というエラーが出てるのではないかと推測します。

投稿2021/05/02 13:53