离子不能得到开放的角色 [英] Ionic can't get open cors

问题描述

我正在尝试从离线安卓应用中的实时服务器获取API数据，但它会返回此错误：

I am trying to get API data from live server in ionic android app but it returns this error:

Access to XMLHttpRequest at 'https://example.com/api/categories/' from origin 'http://192.168.43.71:8100' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

服务器设置

现在我正在使用提供API的实时服务器的Laravel是我在laravel应用程序中设置CORS的方法：

Server settings

Now I am using Laravel for live server which is giving the API here is how I set CORS in my laravel application:

/bootstrap/app.php

<?php
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET');
    header('Access-Control-Allow-Headers: *');
    // rest of the file

由于我的设置，我得到了这个结果在CORS测试员上

due to my setup above I'm getting this result on CORS tester

所以我一直在阅读如何解决这个问题，并提出了许多类似的解决方案，这就是我添加到我的 ionic.config.json file

So I've been reading how to solve this issue and came cross lots of similar solutions and this is what I add to my ionic.config.json file

"proxies": [
    {
      "path": "/api/*",
      "proxyUrl": "https://example.com/api/"
    }
  ]

获取请求（离子服务）

以下是我请求获取方法的方法

Get request (ionic services)

Here is how I request my get method

apiUrl = 'https://example.com/api/categories/';
  constructor(private http: HttpClient) { }

  getCategories(): Observable<any> {
    return this.http.get(`${this.apiUrl}`).pipe(
      map(categories => categories)
    );
  }

知道我还应该做些什么来解决这个问题？

推荐答案

已解决

感谢 Stephen Romero 指出这个解决方案的重要部分，

SOLVED

Thanks to Stephen Romero for pointing the important part of this solution,

根据stephen的回答我将这段代码添加到我的函数中：

based on stephen answer I added this code to my function:

const httpOptions = {
      headers: new HttpHeaders({
        'Accept': 'application/json, text/plain',
        'Content-Type': 'application/json'
      })
    };

并在我的获取请求中使用它，如：

and used it in my get request like:

return this.http.get(`${this.apiUrl}`, httpOptions).pipe(

现在我使用（安装）的for header权限此包在我的laravel应用程序上，并将配置文件设置为以下代码：

Now the for header permissions I used (installed) this package for on my laravel app and made config file set as code below:

return [
    /*
    |--------------------------------------------------------------------------
    | Laravel CORS
    |--------------------------------------------------------------------------
    |
    | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
    | to accept any value.
    |
    */

    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedOriginsPatterns' => [],
    'allowedHeaders' => ['*'],
    'allowedMethods' => ['GET', 'OPTIONS'],
    'exposedHeaders' => [],
    'maxAge' => 0,

];

对于那些不使用Laravel的人

像这样设置标题：

FOR those who doesn't use Laravel

Set your headers like this:

if($request_method = 'GET'){
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, OPTIONS');
    header('Access-Control-Allow-Headers: Authorization, Expires, Pragma, DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range');
    header("Access-Control-Expose-Headers: *");
}

此标题中最重要的部分是 Access- Control-Allow-Headers 部分，如果您只是使用 * 它将无效！你需要设置标题名称。

The most important part of this headers is Access-Control-Allow-Headers part, if you simply use * it won't work! you need to set headers name.

希望它有所帮助。

忘记提及以避免错误 301 您需要从结尾处删除 / 你的api url。

Forgot to mention in order to avoid error 301 you need to remove / from end of your api url.

// my api (before)
https://example.com/api/categories/

//changed to
https://example.com/api/categories

这篇关于离子不能得到开放的角色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！