CORS将来自cakephp restapi实现的数据加载到角度应用程序的问题

Posted 2023-03-04

技术标签:

【中文标题】CORS将来自cakephp restapi实现的数据加载到角度应用程序的问题【英文标题】：Problem with CORS loading data from cakephp restapi implementation into angular app 【发布时间】：2019-09-03 06:31:15 【问题描述】：

我正在尝试与使用 php（CakePHP 框架）开发的已经正常工作的 RestAPI 服务器进行通信；我正在尝试在 Angular 7 应用程序中进行简单的登录操作，如果成功，我将继续执行。

这是 Angular App 调用代码：

  constructor(protected cli: HttpClient)  
    this.tablet_couple = new TabletCoupleModule();
  

  ngOnInit() 
    this.cli.get('http://work.local/grai/api-angular/api/v1/tablet_couples/1.json')
    .subscribe(
      data =>  console.log(data) 
    )
    this.cli.post('http://work.local/grai/api-angular/api/v1/tablet_couples/login.json',
      username: 'xxxxxxxx',
      passoword:  '123456789',
    )
    .subscribe(
      data =>  console.log(data) 
    )

实际问题是GET 调用工作正常，但POST 调用仍然不起作用。

我确定 REST API 工作正常，因为如果我使用 Insomnia 之类的工具，两个调用的响应都是正确的。

我试图找出原因，但问题是每次执行 CORS：

如您在上面看到的，我尝试在 Cakephp 中强制标头，但仍然无法正常工作。

    public function beforeFilter(\Cake\Event\Event $event)
    
        parent::beforeFilter($event);
        if($this->request->is('OPTIONS')) 
            $this->response->header('Access-Control-Allow-Origin','*');
            $this->response->header('Access-Control-Allow-Methods','*');
            $this->response->header('Access-Control-Allow-Headers','Content-Type, Authorization');
        
        else 
            $this->response = $this->response->withHeader("Access-Control-Allow-Origin","*");
            $this->response = $this->response->withHeader("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");
            $this->response = $this->response->withHeader("Access-Control-Allow-Methods","*");

更新 1

我找到了一个将 CORS 与 cakephp 集成的库：cakephp-cors

这个帮助，但我仍然有一个问题：如果它们不在同一个域中，我不能使用 Rest API（可以是 CORS），但我需要。

如果我部署应用程序并将我的 Angular 应用程序放在它工作的同一个域上；但我想部署可以访问远程 REST API 的应用程序。

有什么建议吗？

【问题讨论】：

您收到了对 OPTIONS 请求的 404 响应，这可能意味着它一开始就没有正确路由。 @04FS 有什么管理 OPTIONS 的建议吗？您应该为所有以 Access-Control 标头响应的 OPTIONS 请求提供一条全捕获路由（任何 url 都接受的路由）。还要对任何请求类型使用相同的 Access-Control 标头进行回复，否则 OPTIONS 请求将成功，但实际的 POST/GET 请求将失败 【参考方案1】：

好的，我对@JensV 有一个“解决方案”。

1th :: cakephp 3.1.x 太旧了

我使用的是旧版本的 CakePHP (3.1.14)； 3.1.x 太旧了，无法正确管理 OPTIONS 方法调用。

使用 CakePHP 3.7.* 和插件 cakephp-cors 它可以正常工作，现在我可以从 localhost:4200 进行远程调用。

2nd :: 方法选项

这是一种让我非常痛苦的方法；此方法在 POST 方法调用之前由浏览器调用。

此方法的正确响应是来自服务器的 HTTP 代码 200。

如果您没有正确管理此调用，浏览器会截断 POST 调用。

我再次发布一些关于此调用以及如何找到解决方案的参考：

CakePHP, preflight & CORS Handling “XMLHttpRequest” OPTIONS Pre-flight Request in Laravel

我希望它对某人有所帮助。

【讨论】：