Ionic CLI 6.13.0 上的 CORS 问题

Posted

技术标签:

【中文标题】Ionic CLI 6.13.0 上的 CORS 问题【英文标题】:CORS Issue on Ionic CLI 6.13.0 【发布时间】:2021-06-03 09:59:47 【问题描述】:

我正在尝试在ionic 中使用php 在后端发出http post 请求,..

这是我的 ionic 代码:

        let body = 
            'data': ['data [0]', 'data [1]']
        ;
        let options = 
            headers :  'Content-Type' : 'application/json' 
        ;
        const ifSuccess = (response) => 
            console.log(response);
            this.data = response;
        ;
        const ifFail = (response) => 
            this.error = 'Oops! Une erreur au niveau du serveur...';
        ;
        this.http.post('http://localhost/cantine-itu/test', body, options).subscribe(ifSuccess, ifFail);

这是后端(在 php 中):

Flight::before('json', function () 
    header('Access-Control-Allow-Origin: http://localhost:8100');
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Allow-Methods: GET,PUT,POST,DELETE');
    header('Access-Control-Allow-Headers: *');
);

Flight::route('POST /test', function()
    $data = Flight::request()->data;
    Flight::json($data);
);

我收到一条错误消息:Access to XMLHttpRequest at 'http://localhost/cantine-itu/test' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. (error-image)

【问题讨论】:

尝试将标题放在 php 文件的顶部。 我试过了,但没有任何改变...... 【参考方案1】:

您是否从网络浏览器或特定设备收到此错误?

由于这是本地开发而不是生产,我将设置为尽可能宽松。

  'capacitor://localhost',
  'ionic://localhost',
  'http://localhost',
  'http://localhost:8080',

https://ionicframework.com/docs/troubleshooting/cors

【讨论】:

以上是关于Ionic CLI 6.13.0 上的 CORS 问题的主要内容,如果未能解决你的问题,请参考以下文章

本地主机和设备上的 Ionic 的 CORS 问题[关闭]

在 Ionic 4 应用程序中无法绕过 CORS

处理离子中的CORS问题

CORS 问题 (IONIC 3)

github oauth 上的 cors 问题

android live设备上的离子和电容器的CORS问题