Question

我是angularJs中的新手，在我的离子应用程序中我尝试将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 .. Access-Control-Allow-Origin不允许原始http://localhost:8100。（localhost，第0行）

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

标题添加Access-Control-Allow-Origin“*” 标题添加Access-Control-Allow-Headers“origin，x-requested-with，content-type” 标题添加Access-Control-Allow-Methods“PUT，GET，POST，DELETE，OPTIONS”

但这会增加另一个错误：

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

我疯了！有没有人有任何想法？！非常感谢你的关注

Answer 1

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

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

检查https://github.com/driftyco/ionic-cli

中的相关部分

Answer 2

在我的情况下打开命令行到达chrome目录：

C：\ Program Files（x86）\ Google \ Chrome \ Application

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

在您的浏览器中

转到http://localhost:8100，您的问题将得到解决

Answer 3

在开发阶段，交叉来源是我们需要在离子框架中明确处理的问题。

来自离子团队的

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

高层次：

步骤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步：重启＆＃34;离子服务＆＃34;。如果不重新启动ionic.project，更改将不会生效。

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

3 个答案: