angular 11 和 php api 的 CORS 策略错误答案

【问题标题】：CORS policy error with angular 11 and php apiangular 11 和 php api 的 CORS 策略错误
【发布时间】：2023-03-13 05:07:01
【问题描述】：

这是我的 Angular --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 上运行的服务器端语言。

我想从 Angular 调用带有身份验证标头和 X API 密钥的 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 时，这一切正常。但是当我从角度端调用此 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"
          },

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

【问题讨论】：

标签： angular .htaccess codeigniter-3 rest angular11

【解决方案1】：

我是这样解决的。我在应用程序目录中创建了 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

示例后期处理。

【讨论】：