无法加载资源：net::ERR_CONNECTION_REFUSED // Angular 和 api php

Question

我试图在 phpmyadmin 上获取我的数据库中的数据，但出现以下错误

/api/list:1 Failed to load resource: net::ERR_CONNECTION_REFUSED

我的项目文件夹在 wamp64/www.

我的 api 树：

api/

.htaccess
connect.php
list.php

.htaccess

    # Remove the php extension from the filename
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ .php [NC,L]

# Set the headers for the restful api
Header always set Access-Control-Allow-Origin *
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

connect.php

    // db credentials
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '');
define('DB_NAME', 'cars');

// Connect with the database.
function connect() {

    $connect = new PDO('mysql:host=localhost;dbname=cars;charset=utf8', DB_USER, DB_PASS, array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
    
    return $connect;
    
}

$con = connect();

list.php

    require 'connect.php';

$cars = [];
$sql = "SELECT id, model, price FROM cars";

if($result = $con->query($sql)) {
    
    $cr = 0;
    while($row = $result->fetch(PDO::FETCH_ASSOC)) {
        $cars[$cr]['id']    = $row['id'];
        $cars[$cr]['model'] = $row['model'];
        $cars[$cr]['price'] = $row['price'];
        $cr++;
    }

    echo json_encode(['data'=>$cars]);
}
else {
http_response_code(404);

}

car.service.ts

    import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';

import { map } from 'rxjs/operators';

import { Car } from './car';


@Injectable({
providedIn: 'root'
})
export class CarService {
    baseUrl = 'https://localhost/api';

    constructor(private http: HttpClient) { }

    getAll() {
        return this.http.get(`${this.baseUrl}/list`).pipe(
            map((res:any) => {
                return res['data'];
            })
        );
    }
}

app.component.ts

    import { Component, OnInit } from '@angular/core';

import { Car } from './car';
import { CarService } from './car.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    cars: Car[] = [];
    error = '';
    success = '';
    title = 'cars';
    
    constructor(private carService: CarService) {
    }
        
    ngOnInit() {
    this.getCars();
    }
        
    getCars(): void {
        this.carService.getAll().subscribe(
            (data: Car[]) => {
                this.cars = data;
                this.success = 'successful retrieval of the list';
            },
            (err) => {
                console.log(err);
                this.error = err;
            }
        );
    }
}

我对这个错误有点迷茫，因为我没有更多信息，我不知道我是否为您提供了足够的信息，如果我遗漏了什么，请告诉我，谢谢！

Answer 1

您正在使用 https 作为协议，请确保运行您的 apache http 端口 443 或更改 baseUrl 中的 url 以使用 http（如果您不希望端口 80） TLS.

无法加载资源：net::ERR_CONNECTION_REFUSED // Angular 和 api php

Failed to load resource: net::ERR_CONNECTION_REFUSED // Angular and api php

php

angular

api

apache

wamp