Ionic(TypeScript)应用Basic Auth验证失败，求解决方案

Hey there, let's work through your issue step by step. You're hitting two intertwined problems here: CORS (Cross-Origin Resource Sharing) restrictions and a 401 Unauthorized error. Let's break down the fixes:

1. 先解决核心的CORS问题（服务器端配置） #

The error message clearly states the preflight OPTIONS request failed because the server isn't returning the required Access-Control-Allow-Origin header. Here's what your server needs to do:

• Add the header Access-Control-Allow-Origin: http://localhost:8100 to all responses (including OPTIONS preflight requests). For production, restrict this to your actual frontend domain instead of using * (which is insecure for authenticated requests).
• Since your request includes custom headers (Authorization), the server must also respond to OPTIONS requests with:

  Access-Control-Allow-Headers: Authorization, Content-Type
  Access-Control-Allow-Methods: GET, OPTIONS
  

• If your server expects credentials (even Basic Auth counts here), add Access-Control-Allow-Credentials: true to the response headers.
• Critical: Make sure your server properly handles OPTIONS requests—they should return a 200 or 204 status code without requiring authentication (preflight requests don't send the Authorization header by default).

2. 验证你的Basic Auth凭证 #

Before blaming CORS, double-check that your authentication details are correct:

• Ensure Userid:password has the right casing, no extra spaces, and matches what the server expects.
• Test the request directly with a tool like Postman: send a GET request to your url, add the Authorization: Basic [base64-string] header, and confirm if you get a 200 response. If Postman also returns 401, your credentials are the problem, not CORS.

3. 前端代码优化（Angular专属） #

It looks like you're using an older Angular Http API—switching to the modern HttpClient (available in Angular 4.3+) will make your code cleaner and more maintainable:

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

// 在你的组件/服务内
onClick() {
  // 正确编码凭证
  const authCredentials = btoa('Userid:password');
  const headers = new HttpHeaders({
    'Authorization': `Basic ${authCredentials}`,
    'Content-Type': 'application/json'
  });

  this.http.get(this.url, { headers })
    .subscribe(
      response => console.log('响应结果:', response),
      error => console.error('请求失败:', error)
    );
}

• 如果你的服务器要求跨域请求携带凭证，在请求配置里添加withCredentials: true：

  this.http.get(this.url, { headers, withCredentials: true })
  

4. 本地开发临时解决方案（禁止用于生产环境） #

如果你暂时无法修改服务器配置，可以用Angular的代理配置绕过开发阶段的跨域限制：

1. 在项目根目录创建proxy.conf.json文件：

   {
     "/api": {
       "target": "https://你的服务器地址",
       "secure": false,
       "changeOrigin": true
     }
   }
   

2. 更新angular.json的serve配置，引入这个代理文件：

   "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
       "browserTarget": "你的项目名:build",
       "proxyConfig": "proxy.conf.json"
     }
   }
   

3. 将前端请求的URL改为以/api开头（比如服务器端点是https://你的服务器地址/data，前端就用/api/data）。Angular会自动转发请求到服务器，避免跨域问题。

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