离子问题没有'Access-Control-Allow-Origin'

时间:2016-07-13 17:00:43

标签: ionic-framework ionic2

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

XMLHttpRequest无法加载https://mywebsite.com/api。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许原点“http://localhost”访问。

我已经尝试将此添加到.htaccess: 标题集Access-Control-Allow-Origin:*

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

但仍无法正常工作

$ http.get(url).success(function(response){...}

4 个答案:

答案 0 :(得分:18)

将它放在PHP文件之上,如:

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

?>

注意:与PHP标头功能的所有用法一样,这必须在从服务器发送任何输出之前。

答案 1 :(得分:10)

这个角色问题在离子方面有一个简单的解决方法。

转到ionic.config.json(以前为ionic.project)并添加代理,例如:

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

之后使用&#34; / api /&#34;而不是&#34; https://mywebsite.com/api&#34;当你打电话给api时。

欲了解更多信息:

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

答案 2 :(得分:1)

这是我们使用Angular和Ionic时发现的典型错误,问题出现是因为当您在应用的浏览器中加载的应用加载来自本地的来源的所有内容时地址http://localhost:8100,然后当您要将任何AJAX请求发送到 localhost:8100 以外的其他主机时,请求从与来源不同的任何点发出,则需要< strong> CORS (跨域资源共享)预检请求,以查看它是否可以访问资源。

解决方案是使用代理到后端,通过这种方式,您可以高举某些网址并将其发送到后端服务器。实施很简单:

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且上下文为{{1} }})

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

答案 3 :(得分:1)

前提:这个问题通常只运行离子服务,或使用离子作为网络应用程序,而不是离子作为应用程序。

您可以避免修改项目并使用扩展来禁用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