带有 PHP Api CORS 请求问题的 Angular4 应用程序

Posted 2023-03-04

【中文标题】带有 PHP Api CORS 请求问题的 Angular4 应用程序

【英文标题】：Angular4 app with PHP Api CORS request issue

【发布时间】：2020-01-10 00:05:12

【问题描述】：

我正在尝试在 Angular4 Ionic 应用程序中发布，我已阅读所有堆栈溢出帖子并按照他们所说的做了。在我的 php 中，我添加了

header ("Access-Control-Allow-Origin: *");
header ("Access-Control-Expose-Headers: Content-Length, X-JSON");
header ("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
header ("Access-Control-Allow-Headers: *");

我能够成功地从 POSTMAN 发布帖子，但通过在 android 中调试应用程序我得到 ...from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

我只是在 angular4 ionic 应用中尝试一个简单的帖子..

getImages() 
       this.http.post(url, 
      title: 'foo',
      body: 'bar',
      userId: 1
    )
      .subscribe(
        res => 
          console.log(res);
        ,
        err => 
          console.log("Error occured");
        
      );
    

【参考方案1】：

我使用下面的 php 代码解决了这个问题，专门允许来自我的本地主机，当我上线时我将删除它。

$http_origin = $_SERVER['HTTP_ORIGIN'];

$allowed_domains = array(
    'http://localhost:8100',
    'localhost',
    '*',
    'localhost:8100',
    'http://www.detdev.co.uk',
    'detdev.co.uk'
);

if (in_array(strtolower($http_origin), $allowed_domains))
  
    // header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Origin: $http_origin");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');


// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') 
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
        header("Access-Control-Allow-Headers: Authorization, Content-Type,Accept, Origin");
    exit(0);