👀 Views: 449 💬 Answers: 1 📅 Created: 2025-06-05

ajax angular laravel httpclient cors typescript

I'm trying to figure out I've hit a wall trying to I'm relatively new to this, so bear with me. I'm working on an Angular application that needs to send data to a Laravel backend via an AJAX POST request. However, I'm working with a 'Network behavior' message when trying to make the call. I've verified that the API URL is correct, and I'm using the latest version of Angular (version 13.0.0). My Laravel API is set up to accept CORS requests, and I'm using the `cors` middleware with the following configuration: ```php // In app/Http/Middleware/Cors.php public function handle($request, Closure $next) { return $next($request) ->header('Access-Control-Allow-Origin', '*') ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization') ->header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); } ``` On the Angular side, I'm using the `HttpClient` to make the POST request like this: ```typescript import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class ApiService { constructor(private http: HttpClient) {} sendData(data: any) { return this.http.post('http://localhost:8000/api/data', data); } } ``` When I call `sendData({ name: 'test' })`, I see the following behavior in my browser's console: ``` GET http://localhost:8000/api/data net::ERR_NETWORK_CHANGED ``` I've tried checking my network connection, and everything seems fine. I've also made sure that my Laravel server is running correctly on port 8000. I even tested the API endpoint with Postman, and it works as expected, returning a success response. Has anyone faced a similar scenario or have any clues on what could be going wrong? Any insights would be greatly appreciated! My development environment is macOS. I'm developing on Ubuntu 22.04 with Typescript. The stack includes Typescript and several other technologies.