Ionic最新版中HttpClient调用PHP REST API：OPTIONS问题与授权头设置

Hey there! Let's break down your two issues one by one—they're super common when working with Ionic/Angular and PHP APIs, so you're not alone here.

1. POST request being detected as OPTIONS #

This isn't actually an issue with your Ionic code—it's the browser's CORS preflight check at work. When you send a cross-domain request (e.g., your Ionic app running on localhost:8100 calling a PHP API on a different domain/port), the browser automatically sends an OPTIONS request first to verify if the server allows the actual POST request.

To fix this, you need to handle OPTIONS requests on your PHP backend and return the correct CORS headers. Here's how to do it:

<?php
// Handle preflight OPTIONS request first
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    // Allow your Ionic app's origin (replace with your actual app URL in production)
    header('Access-Control-Allow-Origin: http://localhost:8100');
    // Allow the HTTP methods your API supports
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
    // Allow headers your requests will send (including Authorization for your token)
    header('Access-Control-Allow-Headers: Content-Type, Authorization');
    // Cache preflight response for 1 day to reduce extra requests
    header('Access-Control-Max-Age: 86400');
    exit(0); // Stop execution after sending preflight headers
}

// Your regular POST request logic goes here
// ...
?>

Once your PHP backend properly responds to the OPTIONS request, the browser will proceed to send your actual POST request.

2. Setting Authorization header with Bearer Token #

You have two clean ways to add the Bearer Token to your requests in Ionic/Angular:

Option 1: Add headers to individual requests #

If you only need the token for specific requests, you can define headers directly when calling HttpClient:

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

// In your service or component
constructor(private http: HttpClient) {}

sendPostRequest() {
  const authToken = 'your-bearer-token-value'; // Fetch this from local storage or auth service
  const requestHeaders = new HttpHeaders({
    'Authorization': `Bearer ${authToken}`,
    'Content-Type': 'application/json'
  });

  const requestBody = { /* Your POST data here */ };

  this.http.post('https://your-api-url.com/endpoint', requestBody, { headers: requestHeaders })
    .subscribe(
      response => console.log('Success:', response),
      error => console.error('Error:', error)
    );
}

Option 2: Use an HTTP Interceptor (global solution) #

For apps where most requests need the Bearer Token, an interceptor will automatically add the header to every outgoing request—no need to repeat code:

1. Create the interceptor file (auth.interceptor.ts):

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // Fetch token from local storage (or your auth service)
    const authToken = localStorage.getItem('auth_token');

    if (authToken) {
      // Clone the request and add the Authorization header
      const authenticatedRequest = request.clone({
        setHeaders: {
          Authorization: `Bearer ${authToken}`
        }
      });
      return next.handle(authenticatedRequest);
    }

    // If no token, proceed with original request
    return next.handle(request);
  }
}

2. Register the interceptor in app.module.ts:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  // ... other module config
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true // Allows multiple interceptors
    }
  ]
})
export class AppModule { }

Reading the token in PHP #

To access the Bearer Token on your PHP backend, use this code (some server environments hide the Authorization header by default):

<?php
// Get all request headers
$headers = getallheaders();

if (isset($headers['Authorization'])) {
    // Extract token by removing the "Bearer " prefix
    $bearerToken = str_replace('Bearer ', '', $headers['Authorization']);
    // Validate or use the token here
}
?>

内容的提问来源于stack exchange，提问作者user9586857