谷歌浏览器中的离子CORS问题答案

【问题标题】：Ionic CORS issue in google chrome谷歌浏览器中的离子CORS问题
【发布时间】：2017-04-27 03:19:48
【问题描述】：

我试图通过 Ionic 应用程序从浏览器访问 URL 并遇到 CORS 问题，错误是：

XMLHttpRequest 无法加载 http://school_mit.schnotify.com/api/v1/。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'http://192.168.2.10:8100'。

【问题讨论】：

XMLHttpRequest cannot load https://www.[website].com/的可能重复
你应该先在谷歌或这里搜索，然后再问一个已经有数千个答案的问题
我搜索了很多但没有得到解决方案
你应该发送带有标题的allow-origin

标签： javascript cors

【解决方案1】：

我遇到了同样的问题，我刚刚使用this Chrome Plugin 修复了它允许将Allow-Control-Allow-Origin: * 添加到标头，以便您可以从任何来源发出 Ajax 请求。

在 Chrome 中你也可以use flags

chrome --disable-web-security

或

--allow-file-access-from-files --allow-file-

但我更喜欢使用扩展程序，因为您可以在需要时打开它，而无需更改服务器设置。

【讨论】：

请始终解释您建议的修复方法。为什么这个插件有效，它有什么作用？

【解决方案2】：

您需要在后端添加http://192.168.2.10 作为允许的来源。或者你可以使用代理。

【讨论】：

【解决方案3】：

必须在服务器端启用 CORS。 Ionic 应用程序在 Rest API 上工作。如果你有一个 PHP 后端，你可以使用像 Slim 这样的框架并将这些头文件添加到你的 php 文件中。

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization");
header('Access-Control-Allow-Headers: Content-Type, x-xsrf-token');
header("Access-Control-Allow-Headers: X-Requested-With");
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
        exit(0);
}

/*Resr of server file*/

?>

服务器端的这些标头应该可以解决大部分 CORS 问题。您可以在其他语言中实现相同的功能

【讨论】：