web-dev-qa-db-ja.com

ionic problemeいいえ 'Access-Control-Allow-Origin'

私はionicアプリで作業しています。私の問題は、サーバーからデータを取得しようとすると、これを取得しました：

XMLHttpRequestはロードできません https://mywebsite.com/api 。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、Origin ' http：// localhost 'はアクセスを許可されません。

私はすでにこれを.htaccessに追加しようとしています：ヘッダーセットAccess-Control-Allow-Origin：*

そして、これは私のAPIページ（PHP）に：header（ 'Access-Control-Allow-Origin：*'）;

それでも動作しない

$ http.get（url）.success（function（response）{...}

ionic-frameworkionic2
9
bakrim

PHPファイルの先頭に置きます：

<?php
header("Access-Control-Allow-Origin: *");
// then your stuff goes here

?>

注：PHPヘッダー関数のすべての使用と同様に、これはサーバーから出力が送信される前でなければなりません。

18
Arul

このcors問題は、ionで簡単に回避できます。

Ionic.config.json（以前はionic.project）に移動して、たとえばプロキシを追加します。

{
  "name": "proxy-example",
  "app_id": "",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://cors.api.com/api"
    }
  ]
}

その後、apiを呼び出すときに、「 https://mywebsite.com/api 」ではなく「/ api /」を使用します。

詳細については：

http://blog.ionic.io/handling-cors-issues-in-ionic/

10
misha130

前提：この問題は通常、ionic serveを実行するか、ionic webアプリとしてではなく、ionic asアプリとして。

プロジェクトの変更を避け、拡張機能を使用してCORSを無効にすることができます。

クロムを使用して開発する場合、次のようになります。

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related

または、Firefoxで必要な場合は、次のようにします。

https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/

IEとEdgeは吸うので、これらの場合は設定でCORSを手動で無効にする必要があります

1
Luca C.

これは、AngularおよびIonicで作業するときに見られる典型的なエラーです。問題は、アプリのブラウザーに読み込まれたアプリがOriginローカルアドレスhttp://localhost:8100から来て、AJAXリクエストをlocalhost:8100リクエストは、Originとは異なる任意のポイントから呼び出され、[〜＃〜] cors [〜＃〜]（Cross Origin Resource Sharing）プリフライト要求は、リソースにアクセスできるかどうかを確認します。

ソリューションは、バックエンドへのプロキシを使用することです。これにより、特定のURLをハイジャックし、バックエンドサーバーに送信できます。実装は簡単です。

1.-プロジェクトのルートフォルダーにあるionic.config.jsonファイルを変更します。

2.-新しいホストがionic.config.jsonにあると仮定して、http://localhost:3000ファイル内にプロキシを設定します。

   "proxies": [
{
  "path": "/endpoints",
  "proxyUrl": "http://localhost:3000"
}
  ]

3.-サービスで、このhttp://localhost:3000/endpoints/any/path/that/you/useからこの../endpoints/any/path/that/you/useにリクエストのパスを少し変更します（別のホストがlocalhost:3000にあり、コンテキストが/endpointsであると仮定します）

これについてさらに情報が必要な場合は、 http://blog.ionic.io/handling-cors-issues-in-ionic/ を確認してください。

1
havelino