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

Question

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

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

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

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

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

但仍然无法正常工作

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

Answer 1

将其放在您的PHP文件顶部，例如：

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

?>

注意：与PHP标头函数的所有用法一样，必须在从服务器发送任何输出之前。

Answer 2

此cors问题在离子方面具有简单的解决方法。

转到您的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时发现的典型错误，出现此问题的原因是，当您的应用程序加载到应用程序的浏览器中时，它会加载来自本地地址http://localhost:8100的origin中的所有内容，那么当您要发出发送到http://localhost:8100以外的其他主机的任何AJAX请求时，将从不同于origin的任意点调用该请求，该请求需要CORS（跨源资源共享）预检请求查看它是否可以访问资源。

解决方案是使用后端代理，您可以劫持某些URL并将其发送到后端服务器。实现很容易：

1.-修改项目的根文件夹中的文件 localhost:8100 。

2.-配置您的代理，在您的ionic.config.json文件中放入此文件，假设您的新主机位于ionic.config.json中。

http://localhost:3000

3.-在您的服务中，将请求的路径从此http://localhost:3000更改为此

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

（假设另一个主机位于http://localhost:3000/endpoints/any/path/that/you/use，上下文为http://localhost:3000/endpoints/any/path/that/you/use）]

如果需要有关此信息的更多信息，请检查../endpoints/any/path/that/you/use

Answer 4

前提：此问题通常仅运行离子服务，或使用离子作为Web应用程序，而不是离子作为应用程序。

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

对于使用chrome进行开发，如下所示：

localhost:3000

或者，如果您需要使用Firefox，则如下所示：

/endpoints

IE和Edge很烂，因此您必须在设置中手动禁用CORS