离子问题没有“访问控制允许来源”答案

【问题标题】：ionic problem No 'Access-Control-Allow-Origin'离子问题没有“访问控制允许来源”
【发布时间】：2019-12-08 02:10:57
【问题描述】：

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

XMLHttpRequest 无法加载 https://mywebsite.com/api。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，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(函数(响应) {...}

【问题讨论】：

如果在浏览器上运行时没有获取数据，则需要添加名为 Allow Control Allow Origin 的扩展

标签： ionic-framework ionic2

【解决方案1】：

把它放在你的 PHP 文件的顶部，比如：

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

?>

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

【讨论】：

仍然无法正常工作。我所有的 php 文件都以 header("Access-Control-Allow-Origin: *"); 开头
能否请您发布您的 API 完整 URL？
谢谢你，我发现了问题，它是 www.domaine.com 的 canged domaine.com 的 URL，它可以工作

【解决方案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”。

【讨论】：

不使用离子服务时不需要代理。您需要使用实际的 URL。
这仅在您使用 ionic serve 服务器时可用。当您部署到设备时，它不起作用。正确的答案是在您的服务器上正确实施 CORS。
Ionic 应用不需要设备上的 cors，它们不是 chrome。
我试图这样做，但现在我得到 404（未找到）错误。我还需要做点别的吗？
@WesinAlves 看看你的控制台，看看代理是干什么的。也许你在路由中遗漏了一些东西

【解决方案3】：

这是我们在使用 Angular 和 Ionic 时发现的典型错误，出现问题是因为当您的应用在您的应用的浏览器中加载时，会加载来自本地的 origin 的所有内容地址@987654321@，那么当您想要将任何AJAX 请求发送到 localhost:8100 以外的其他主机时，该请求会从不同于origin 的任何点调用，它需要一个CORS（Cross Origin Resource Sharing）预检请求，看看它是否可以访问资源。

解决方案是使用 Proxy To Backend，这样您就可以劫持某些 url 并将它们发送到后端服务器。实现很简单：

1.- 修改项目根目录下的ionic.config.json文件。

2.- 配置你的代理，在你的 ionic.config.json 文件中放这个，假设你的新主机在 @987654322@。

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

3.- 在您的服务中，将您的请求路径从 @987654323@ 更改为 ../endpoints/any/path/that/you/use（假设另一台主机在 localhost:3000 中并且上下文是 /endpoints）

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

【讨论】：

【解决方案4】：

前提：这个问题通常只是运行 ionic serve，或者使用 ionic 作为 web 应用，而不是在 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

【讨论】：