php - 加载资源失败:net::ERR_CONNECTION_REFUSED // Angular 和 api php
问题描述
我试图在 phpmyadmin 上获取我的数据库中的数据,但出现以下错误
/api/list:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
我的项目文件夹在 wamp64/www 中。
我的 api 树:
接口/
- .htaccess
- 连接.php
- 列表.php
.htaccess
# Remove the php extension from the filename
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.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"
连接.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();
列表.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);
}
汽车服务.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;
}
);
}
}
我对这个错误有点迷茫,因为我没有更多信息,我不知道我是否给你足够的信息,如果我错过了什么,请告诉我,谢谢!
解决方案
您正在使用 https 作为协议,请确保在端口 443 上运行您的 apache http,或者baseUrl
如果您希望端口 80 没有 TLS,请将您的 url 更改为使用 http。
推荐阅读
- angular - 在Angular中创建动态反应表单时无法将变量设置为FormControl名称
- iframe - 在 iFrame 下为 Safari 加载网页时 CSS 损坏
- github-pages - 将 master 分支中的更改推送到 gh-pages 分支
- android - Exoplyaer 不会将当前位置从服务返回到活动?
- database - 如何在 mongoDB 服务器上配置 SSL?
- hadoop - 将hdfs文件附加到本地文件?
- youtube-api - Youtube API - 视频类别 ID 可分配
- vue.js - vue.js 反应性不适用于对象数组
- c# - 如何通过 C# 代码将 file:/// 转换为正常路径,例如:S:/soft/abc/xy.txt
- oop - Lua 程序中的文件无法引用彼此的变量