Ionic App 和服务器帖子：Access-Control-Allow-Origin答案

【问题标题】：Ionic App and server post: Acces-Control-Allow-OriginIonic App 和服务器帖子：Access-Control-Allow-Origin
【发布时间】：2014-11-27 17:46:31
【问题描述】：

我是 angularJs 的新手，在我的 ionic 应用程序中我尝试将 json 发送到我的服务器，这是控制器：

`enter code here`.controller('DashCtrl', ['$scope','$http',function($scope, $http) {
    $scope.formData = {};
    $scope.sendForm = function(){
         
        $http({
        method  : 'POST',
        url     : 'http://www.---.org/appForm.php',
        data    : JSON.stringify($scope.formData),  // pass in data as strings
        headers : {'Access-Control-Allow-Origin':'*'}
        })
        .success(function(data) {
            console.log(data);

            if (!data.success) {
            	// if not successful, bind errors to error variables
                $scope.errorName = data.errors.name;
                $scope.errorSuperhero = data.errors.superheroAlias;
            } else {
            	// if successful, bind success message to message
                $scope.message = data.message;
            }
        });
    };

但是当我发送帖子时，控制台会显示以下错误消息：

-[错误] 加载资源失败：Access-Control-Allow-Origin 不允许 Origin htt..。（appForm.php，第 0 行）

-[错误] XMLHttpRequest 无法加载 htt.. Origin http://localhost:8100 不被 Access-Control-Allow-Origin 所允许。（本地主机，第 0 行）

我尝试将此 .htaccess 放在我的主文件夹中：

标头添加 Access-Control-Allow-Origin "*" 标头添加 Access-Control-Allow-Headers "origin, x-requested-with, content-type" Header 添加 Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

但这又增加了一个错误：

-加载资源失败：服务器响应状态为 500（内部服务器错误）。

我要疯了！有人知道吗？！非常感谢您的关注

【问题讨论】：

您的服务器日志中是否有任何堆栈跟踪错误？错误 500 是服务器错误。
您是否尝试更改您的android项目中config.xml文件<access origin="*"/>中的设置。

标签： javascript angularjs .htaccess cordova post

【解决方案1】：

在我的例子中打开命令行进入 chrome 目录：

C:\Program Files (x86)\Google\Chrome\Application

输入：chrome.exe --disable-web-security

在您的浏览器中转到http://localhost:8100，您的问题将得到解决

【讨论】：

【解决方案2】：

您可以将服务代理添加到您的 ionic.project 文件中。

{
  "name": "appname",
  "email": "",
  "app_id": "",
  "proxies": [
    {
      "path": "/v1",
      "proxyUrl": "https://api.instagram.com/v1"
    }
  ]
}

查看https://github.com/driftyco/ionic-cli中的相关部分

【讨论】：

【解决方案3】：

在开发阶段，跨源是我们需要在 ionic 框架中明确处理的问题。

Here is a good blog page 来自 ionic 团队，其中包含问题的完整详细信息

在高层次上：

第 1 步：将代理详细信息添加到 ionic.project

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

第 2 步：作为一种良好做法，添加角度常量来管理外部端点 - 这不是强制性的

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.constant('ApiEndpoint', {
  url: 'http://localhost:8100/api'
})

第 3 步：重新启动“离子服务”。不重新启动 ionic.project 更改将不会生效。

【讨论】：