laravelでajaxの通信が出来ない

Question

実現したいこと

laravelのbladeからajaxのPOSTで別サーバーから値を取得し、コントローラーに値を渡したいです。
。

前提

laravel9で会員登録してメール認証した後のタイミングで実行しています。

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

console.logでchromeからデバッグした内容を確認した所、登録ボタンを押した後には入ってきていますが、そもそもajaxの通信が行われていません。

該当のソースコード

blade側
<form method="POST" action="{{ route('register) }}" id="add_form"> 
    @csrf
　<div>
       <x-input-label for="card_holder_name" :value="__('氏名')" />
        <x-text-input id="cname" class="block mt-1 w-full" type="text" name="name":value="old('name')" />
   </div>
　
　<x-primary-button class="ml-4" id="register">
         {{ __('Register') }}
   </x-primary-button>
</form

js側
　<script>
         let registerCardButton = document.getElementById("register");
         if (registerCardButton != null) {
               console.log('test');
               registerCardButton.addEventListener("click", function () {
                    alert('呼び出しOK');
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　let url = "https://sample";
                    let xhr = new XMLHttpRequest();
                    xhr.open('POST', url, true);
                    xhr.setRequestHeader('Accept', 'application/json');
                    xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
                    xhr.addEventListener('loadend', function () {
                    if (xhr.status === 0) {
                         alert("接続に失敗しました");
                         return;
                    }
                    let response = JSON.parse(xhr.response);
                    if (xhr.status === 200) {
                       console.log('通信成功');
                    } else {
                       console.log('通信失敗');
                    }
                    });
                    xhr.send(JSON.stringify(data));
                });
          }

Controller側
public function register(Request $request): RedirectResponse
    {
        
        $a = $request->all();
        var_dump($a);
   }

試したこと

alert('呼び出しOK');までは表示されますが、そこから下のajaxが実行されません。デバッグしても表示されないので、そもそも通信が実行されていないようです。

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

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

本文に書かれてないので分からないですが、alert()のダイアログは閉じてますよね？

あと気になるのがsend()のxhrがスコープ外なんじゃないかという懸念はありますが。
インデント揃ってないので結構そのあたりが怪しいです。
提示されたコードの限りだと　 if (registerCardButton != null) {　が閉じられてないようにも見えますし。

[nagi]

コメントありがとうございます。インデントと閉じ括弧の方はちゃんと出来ていますが、それでも出来ない状態です。alert()のダイアログも消した状態で実行しています。

見ずらいと思いますので修正しました。

[m.ts10806]

urlの設定値以外は実際のコードという前提で回答してます。

[tabuu]

>ajaxのPOSTで別サーバーから値を取得し、
ページを表示しているドメインとは異なるドメインということですか？

[nagi]

はい、その認識であっています。POSTで別サーバーから値を取得したいのですが、上手く出来ない状態です。メール認証する前の状態では値を取得出来ることを確認出来ました。メール認証した後に実行するとなぜか同じソースでも出来なくなってしまいます。

[m.ts10806]

その前提を具体的に書いてないとまともに応えようないと思います（赤の他人には質問に書いてあることが全てで、「別サーバーから値を取得し」だけでは正直何の情報もありません）。
他者API（APIなのかどうかも分からないですが）が絡んでいる以上、問題はコードだけにあるわけではないので。

Answer 1

コードそのままなのであれば

//↓ここに大量に全角スペースが入ってるので、JavaScriptの構文エラーになるのでは
[　　　　　　　　　　　　　]             let url = "https://sample";

全角スペースを使う機会ってプログラミング上ではほとんどないと思います（文章書くときとかくらいですかね）

なので
↓ここの全角スペースも何かしらの影響はあるかもしれません。
<script>

実際のコードがどこまでか分からないですが、見ている人には提示されたものが全てとなるので、
今回のようにurlやパスワードなどはマスクかけるとしてもマークダウンのcode内には実際のコード以外は省くべきと。

Comments

[nagi]

ご指摘ありがとうございます。実際のソースコードには全角スペースなどは入っていない状態です。こちらで編集する際にインデントを揃えるために調整した時に入ってしまったようです。あまり投稿自体が慣れていないためすみません。

[m.ts10806]

コードを提示のために加工する必要は一切ないです。
そのまま提示してください（でないと今回のように無駄なやり取りが何回も発生します）

回答者は見た目奇麗なコードを求めているわけではなく、
質問者の現象が再現できるコードを求めているので。
例え本来影響のない改行や半角スペースが１つでも違えばもう別のものです。