从localhost:4200访问远程服务器的CORS问题：请求头如何设置？

Hey there, let's tackle this CORS issue you're hitting with your Angular app and remote PHP backend. That Cross-Origin Request Blocked error is telling you exactly what's wrong: your PHP server's Access-Control-Allow-Origin header doesn't match your local localhost:4200 origin.

First, let's cover the request headers you can set from your Angular side, but I want to be clear upfront—these won't fix the problem on their own. They work alongside the critical server-side configuration you need to update.

请求头设置（Angular端） #

When sending requests from your Angular app, here's what you might want to include:

• Origin: Your browser automatically sets this to http://localhost:4200 when you make the request, so you usually don't need to add it manually. But if you ever need to specify it explicitly (rare for local dev), you can do it like this in your HTTP call:

  import { HttpClient, HttpHeaders } from '@angular/common/http';
  
  // ... inside your component/service
  const requestHeaders = new HttpHeaders({
    'Origin': 'http://localhost:4200'
  });
  
  this.http.get('https://example.com/php', { headers: requestHeaders }).subscribe(response => {
    // handle response
  });
  

• Content-Type: If you're sending JSON data (like in POST/PUT requests), set this header to let the PHP server know the format of your payload:

  const requestHeaders = new HttpHeaders({
    'Content-Type': 'application/json'
  });
  
  this.http.post('https://example.com/php', yourData, { headers: requestHeaders }).subscribe(...);
  

• Preflight headers: Headers like Access-Control-Request-Method and Access-Control-Request-Headers are sent automatically by the browser for "non-simple" requests (like POST with JSON, or custom headers). You don't need to manually set these—Angular and the browser handle this part for you.

核心修复：PHP服务器端配置 #

The real fix here lives in your PHP script. You need to update it to send the correct CORS headers that allow your local Angular app to access it. Here's how:

1. Allow your local origin: Add this line at the very top of your PHP file (before any output is sent):

   header("Access-Control-Allow-Origin: http://localhost:4200");
   

2. If you need to send credentials (like cookies or auth tokens): Add these additional headers to enable that:

   header("Access-Control-Allow-Credentials: true");
   header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
   header("Access-Control-Allow-Headers: Origin, Content-Type, X-Requested-With");
   

3. Handle OPTIONS preflight requests: Browsers send an OPTIONS request before non-simple requests to check CORS permissions. Your PHP script needs to respond to this properly to avoid errors:

   if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
       http_response_code(200);
       exit();
   }
   

A quick note for later: When you move to production, replace http://localhost:4200 with your actual production domain. Avoid using * as the allowed origin if you need to support credentials—they don't work together.

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