![](/img/trans.png)
[英]Laravel Access to XMLHttpRequest at from origin has been blocked by CORS policy
[英]Access to XMLHttpRequest at 'http://localhost/api from origin 'http://localhost:8000' has been blocked by CORS policy
我正在嘗試在后端設置一個帶有簡單CRUD API的角度應用程序。 我在CORS策略方面遇到了一些問題,但我找不到正確的解決方案來解決我的錯誤。 我正在嘗試通過角形來創建用戶(看護者)。
我想我的php api中有超過必要的標題。 我把它們放在.htaccess文件中:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]
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"
我在嘗試請求時也可以在Chrome控制台中看到它們:
正如您所看到的,我得到狀態代碼400:錯誤的請求,但它在我的OPTIONS請求中,所以在我甚至可以發布我的表單數據之前。
那么這就是我在chrome控制台中遇到的錯誤: 所以我認為這是問題所在:
來自origin>' http:// localhost:8000 '的' http://localhost/api_pillassist/caregiver/create.php '訪問XMLHttpRequest已被CORS策略阻止:響應>預檢請求未通過訪問控制檢查:它沒有HTTP ok> status。
我還已經下載了chrome擴展,它允許'允許控制允許來源:*',但即使這樣也行不通。
我將在下面提供一些代碼,雖然我不確定問題在哪里。 我也嘗試在Postman中發送帶有表單數據的POST請求,這樣可行,所以我不知道這是否有用,但無論如何我都會包含它:
這是我在角度應用中使用的組件模板:
<ng-container>
<form #f="ngForm" (submit)="createCaregiver()">
<div class="input-group">
<label for="firstName" class="appear">Voornaam</label>
<input type="text" placeholder="Voornaam" #firstName name="firstName" />
</div>
<div class="input-group">
<label for="lastName" class="appear">Achternaam</label>
<input type="text" placeholder="Achternaam" #lastName name="lastName" />
</div>
<div class="input-group">
<label for="email" class="appear">E-mailadres</label>
<input type="text" placeholder="E-mailadres" #email name="email" />
</div>
<div class="input-group">
<label for="password" class="appear">Wachtwoord</label>
<input type="password" placeholder="Wachtwoord" #password name="password" />
</div>
<div class="login-height"></div>
<div class="actions">
<button class="btn btn-blue btn-main" type="submit">
<span>Registreer</span>
<img src="assets/img/icons/arrow-right.svg" alt="arrow-right" class="icon">
</button>
<p class="smaller-link">
Heb je al een account? Log <a class="small-link" href="/">hier</a> in.
</p>
</div>
</form>
</ng-container>
這是它鏈接到的'createCaregiver()'函數:
export class RegisterComponent implements OnInit {
caregiver = new Caregiver('', '', '', '');
error: string;
constructor(private caregiverService: CaregiverService) {}
ngOnInit() {}
createCaregiver() {
this.caregiverService.create(this.caregiver).subscribe(
(res: Caregiver[]) => {
console.log(res);
},
err => ((this.error = err), console.log(err))
);
}
}
這是caregiverService文件:
export class CaregiverService {
private baseUrl = 'http://localhost/api_pillassist/caregiver';
private caregivers: Caregiver[];
constructor(private http: HttpClient) {}
create(caregiver: Caregiver): Observable<Caregiver[]> {
return this.http
.post(`${this.baseUrl}/create.php`, { data: caregiver })
.pipe(
map(res => {
this.caregivers.push(res['data']);
return this.caregivers;
}),
catchError(this.handleError)
);
}
這是在我的api中我在create.php文件中的內容:
<?php
include_once '../config/database.php';
include_once '../objects/caregiver.php';
$database = new Database();
$db = $database->getConnection();
$caregiver = new Caregiver($db);
$data = $_POST;
$data = json_encode($data);
$data = json_decode($data);
if (
!empty($data->firstName) &&
!empty($data->lastName) &&
!empty($data->email) &&
!empty($data->password)
) {
$caregiver->firstName = $data->firstName;
$caregiver->lastName = $data->lastName;
$caregiver->email = $data->email;
$caregiver->password = $data->password;
$caregiver->created = date('Y-m-d H:i:s');
if ($caregiver->create()) {
http_response_code(201);
echo json_encode(array("message" => "Profile was created."));
} else {
http_response_code(503);
echo json_encode(array("message" => "Unable to create profile."));
}
} else {
http_response_code(400);
echo json_encode(array("message" => "Unable to create profile. Data is incomplete."));
}
我非常感謝能幫助我的人。
預檢(OPTIONS)請求應該返回HTTP OK(也就是代碼200)。
您可以在create.php中測試請求方法,當它是“OPTIONS”時返回200,而不是400(錯誤請求),因為它現在默認發生在代碼的錯誤分支上。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.