CORS 策略错误，angular 11 和 php api

如何解决CORS 策略错误，angular 11 和 php api

这是我的角度 --version 日志

Angular CLI: 11.1.2
Node: 10.19.0
OS: linux x64

Angular: 11.1.1
... animations,common,compiler,compiler-cli,core,forms
... platform-browser,platform-browser-dynamic,router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.2
@angular-devkit/build-angular   0.1101.2
@angular-devkit/core            11.1.2
@angular-devkit/schematics      11.1.2
@angular/cli                    11.1.2
@schematics/angular             11.1.2
@schematics/update              0.1101.2
rxjs                            6.6.3
typescript                      4.1.3

我使用 PHP (Codeigniter) 作为我在 apache2 上运行的服务器端语言。

我想从带有身份验证标头和 X API 密钥的 angular 调用 API。 这是我的角度代码。

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private http:HttpClient){

  }
  title = 'My First Application';


  apiCheck(){
    const httpOptions = {
      headers: new HttpHeaders()
        .set('Authorization','Basic YWRtaW46MTIzNA==')
        .set("x-api-key","sdfasdfasdfsadfsadfsdaf")
        .set("token","sadfsadfasdf")
        .set("Content-Type","application/json")
        
      
    }
  let request = this.http.get('http://localhost/ci/index.php/api/V1/againTest',httpOptions);
   request.subscribe(
      data=>{
          console.log(data);
      }
   );
  }
}

当我从 Postman 请求这个 API 时，这工作正常。但是当我从 angular 端调用这个 API 时得到了这个错误。

我通过添加这个从服务器端启用了 cors。

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Allow-Headers: *');

我也尝试过使用代理设置文档https://angular.io/guide/build#proxying-to-a-backend-server

这是我的 proxy.conf.json

{
    "/api/*": {
      "target": "http://localhost","secure": false,"logLevel": "debug","changeOrigin": true
    }
  }

在 angular.json 文件中添加注册。

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server","options": {
            "browserTarget": "my-dream-app:build","proxyConfig": "./proxy.conf.json"
          },

我没有从任何地方找到任何有效的答案。 预先感谢您的帮助。

解决方法

我是这样解决的。我在应用程序目录中创建了 proxy.config.json 文件。

newApp/proxy.config.json

{
  "/api/*": {
    "target": "http://localhost:8080","secure": false,"logLevel": "debug"
  }
}

localhost:8080 后端 url api。

启动应用程序。

ng serve --proxy-config proxy.config.json

样本后期处理。