离子问题否 'Access-Control-Allow-Origin'

Question

我正在开发离子应用程序。我的问题是：当我尝试从服务器获取数据时，我得到了这个：

XMLHttpRequest cannot load https://mywebsite.com/api. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

我已经尝试将其添加到 .htaccess：

<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: *
</ifModule>

这是我的 api 页面 (PHP)：header('Access-Control-Allow-Origin: *');

但还是不行

$http.get(url).成功(函数(响应){...}

Answer 1

将其放在 PHP 文件之上，例如：

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

?>

注意：对于 PHP 头函数的所有使用，这必须在从服务器发送任何输出之前。

Answer 2

这个 cors 问题在 ionic 中有一个简单的解决方法。

转到您的 ionic.config.json（以前是 ionic.project）并添加一个代理，例如：

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

之后，当您调用 api.

时，请使用“/api/”而不是“https://mywebsite.com/api”

更多信息：

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

Answer 3

这是我们在使用 Angular 和 Ionic 时发现的典型错误，问题出现是因为当您的应用程序在浏览器中加载时，您的应用程序会加载来自 origin[ 的所有内容=45=] 来自您的本地地址 <a href="http://localhost:8100" rel="nofollow noreferrer">http://localhost:8100</a>，然后当您想要将任何 AJAX 请求发送到 localhost:8100 以外的另一台主机时该请求是从不同于 origin 的任何点调用的，它需要一个 CORS（跨源资源共享）预检请求以查看它是否可以访问资源。

解决方案是使用后端代理，这样您就可以劫持某些网址并将它们发送到后端服务器。实施很简单：

1.- 修改项目根文件夹中的文件ionic.config.json。

2.- 配置你的代理，在你的 ionic.config.json 文件里面放这个，假设你的新主机在 <a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a>.

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

3.- 在您的服务中，将请求的路径从 <a href="http://localhost:3000/endpoints/any/path/that/you/use" rel="nofollow noreferrer">http://localhost:3000/endpoints/any/path/that/you/use</a> 更改为 ../endpoints/any/path/that/you/use（假设另一个主机在localhost:3000 上下文是 /endpoints)

如果您需要更多相关信息，请查看 http://blog.ionic.io/handling-cors-issues-in-ionic/

Answer 4

前提：这个问题通常只是运行 ionic serve，或者使用ionic as web app，而不是ionic as app。

您可以避免修改项目并使用扩展来禁用 CORS：

为了使用 chrome 进行开发，像这样：

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

离子问题否 'Access-Control-Allow-Origin'

ionic problem No 'Access-Control-Allow-Origin'

ionic-framework

ionic2

离子问题 否 'Access-Control-Allow-Origin'

ionic problem No 'Access-Control-Allow-Origin'

ionic-framework

ionic2

离子问题否 'Access-Control-Allow-Origin'