Access-Control-Allow-Origin 不适用于 ionic 5 应用程序

Question

我正在按照教程在 Ionic 应用程序中从我的服务器发送和接收数据，但由于 CORS，我在执行此操作时遇到了麻烦。我非常熟悉 CORS 问题，并且在将我的 Javascript Ajax 代码连接到服务器上的 PHP 后端时经常使用“Access-Control-Allow-Origin”解决方案。但是，Ionic 似乎没有任何作用。我在 SO 上看到了几个 questions/answers，也阅读了一些博客，他们都说这应该有效，但实际上没有。

我可以完全控制我的端点并在那里创建了一个 PHP 文件，如下所示：

header("Access-Control-Allow-Origin: *");
$strStudents = '{
  "students": [
  {
    "id": 1,
    "name": "Enola Rowe",
    "class": "tony@mcu.com",
    "address": "131 Oswaldo Street"
  },{
    "id": 2,
    "name": "Timmothy Lueilwitz",
    "age": "15",
    "address": "37137 Abbigail Lock"
  },{
    "id": 3,
    "name": "Madilyn Pacocha",
    "age": "14",
    "address": "094 Morris Plains"
  },{
    "id": 4,
    "name": "Harley Cremin",
    "age": "17",
    "address": "14855 Cathy Square"
  },{
    "id": 5,
    "name": "Juana Ziemann",
    "age": "16",
    "address": "612 Dayana Stream"
  }
  ]
}';
return $strStudents;
?>

我也尝试过其他组合，例如：

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

但没有雪茄。 Ionic 中的相关代码（可能不相关，但我还是会把它放在这里）如下所示：

  export class ApiService {
  base_path = 'http://mywebsite.com/App';
  
  constructor(private http: HttpClient) { }

  // Http Options
  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }

  handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
       // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occured: ', error.error.message);
      ;
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(
        `Backend returned code ${error.status}, ` + `Body was: ${error.error} `);
    }
    // return an observable with a user-facing error message
    return throwError(
      'Something bad happened; please try again later.');
  }

  // Create a new item
  createItem(item): Observable<Student> {
    return this.http.post<Student>(this.base_path, JSON.stringify(item), this.httpOptions)
    .pipe(retry(2), catchError(this.handleError));
  }

  // Get a Student's data by ID
  getItem(id): Observable<Student> {
    return this.http.get<Student>(this.base_path + '/' + id, this.httpOptions)
    .pipe(retry(2), catchError(this.handleError));
  }

  // Get a list of Students
  getList(): Observable<Student> {
    return this.http.get<Student>(this.base_path)
    .pipe(retry(2), catchError(this.handleError));
  }

我得到的错误是：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://mywebsite.com/App. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

（多次）及以后：

Backend returned code 0, Body was: [object ProgressEvent] api.service.ts:31:14 ERROR Something bad happened; please try again later.

我做错了什么？

此外，我想指出，我已经研究了 here 中描述的代理方法，但这将是最后的手段，因为它使我在服务器上添加新文件和更改路径的灵活性降低。

编辑：由于一些评论说没有进行足够的研究，我列出了一些我尝试过的来源：

https://www.joshmorony.com/dealing-with-cors-cross-origin-resource-sharing-in-ionic-applications/（以此开头）

https://www.techiediaries.com/ionic-2-proxy/（这不起作用 - 应用程序无法识别代理）

https://ionicframework.com/blog/handling-cors-issues-in-ionic/（没有 ionic.project 文件 - 也尝试了 projectname.project 文件和其他组合）

https://github.com/ionic-team/ionic-framework/issues/16233（与此问题相关的公开错误报告）

（不用说也不起作用）

我也在 Ionic 中尝试了 Native Http，但得到了同样的错误。

我已经在 Firefox 和 Chrome

中试过了

我认为人们假设这是一个简单的 php 编码错误。我相信它与 Ionic 和 HttpClient 有更多关系。

Answer 1

我找到了问题并进行了修复。正如预期的那样，它在 Ionic App 的代码中。但这并不完全是我所期望的。希望这对处于相同困境的人有用。问题出在这一行：

base_path = 'http://mywebsite.com/App';

这应该是：

base_path = 'http://mywebsite.com/App/';

细微差别但很重要。仔细查看控制台日志后，我发现它给出了 301 错误，原来是“永久重定向”。在这种情况下重定向到第二个 URI（附加斜线）。如果我一直使用 base_path = 'http://mywebsite.com/App/index.php'; 或任何其他文件名，我可能不会看到此错误。

当然，301 重定向返回“Content-Type：text/html”，因为它是一个纯文本页面，而应用程序期望“Content-Type：[=22=” ]”，因此出现 CORS 错误。

Access-Control-Allow-Origin 不适用于 ionic 5 应用程序

Access-Control-Allow-Origin not working with ionic 5 app

php

cors

ionic5