AngularJS 和 PHP 的不同服务器？

Question

我开始开发一个具有 AngularJS 前端和 Laravel 后端的 Web 应用程序。在这个阶段，我的 XAMP htdocs 中有两个目录 - 一个是 AngularJS 项目，由本地端口 9000 上的 grunt 嵌入式服务器提供服务，另一个项目是 Laravel，由本地主机后 8081 上的 XAMP Apache/PHP 提供服务。我看到了问题$http 向其他 Laravel 应用程序和来自外部互联网的其他 url 请求，我用作测试 url - 显然这是由于跨站点安全保护

这让我想到了一个问题 - 前端/后端应用程序是否可以有两台服务器（或至少一台具有不同端口的服务器 - 每个端口可以由不同的服务器提供服务）？我知道这对于应该被 JSONP 请求替换的 GET 请求是可能的。但是其他 HTTP 动词呢？是否有 $http 方法可以向其他服务器或同一服务器/应用程序的其他端口发出 PUT、DELETE 和类似请求？

或者唯一的可能是在同一个应用程序的同一个服务器/端口上同时运行前端和后端。这意味着我应该将 AngularJS 作为 PHP 或 Java 应用程序的一部分托管，而不是为此使用 grunt，是这样吗？

最初的问题来自著名的 Angular JS http status -1 错误。我正在密切关注教程http://www.tutorials.kode-blog.com/laravel-5-angularjs-tutorial，我的代码是：

return $http({
    method: 'GET', //'JSONP',
    url: 'http://localhost:8081/testserver/server.php/api/v1/contracts',
    //url: 'http://jsonplaceholder.typicode.com/posts',
    timeout: 100000
  }).then(function(result) {
      alert(result);
      return result.data;
    },
    function (error) {
      alert(error);
      console.log("v2 my object: %o", error);
      alert(JSON.stringify(error));
    }
  );

当我向 localhost 发出请求时，出现 -1 错误，但我对 http://jsonplaceholder.typicode.com/posts 的请求给出了预期的答案。我尝试使用我的外部 IP 地址而不是 localhost，但错误仍然存​​在。我的服务器端代码显然使用了 Laravel Illuminate ->get() 函数，我认为该函数完成了将 Contract 对象数组转换为 JSON 响应所需的所有转换：

public function index($id = null) {
    if ($id == null) {
        //this branch is being tested 
        return Contract::orderBy('CONTRACT_NO', 'asc')->get();
    } else {
        return $this->show($id);
    }
} 

服务器响应没有任何异常——它是 JSON 数组：

[{"CONTRACT_NO":"1","CUSTOMER":null,...}]

Answer 1

可以通过在 Apache 服务器上配置虚拟主机来实现。可以通过使用不同的域名（或子域）、IP 地址或端口来进行区分。

端口 80 和 8080 上的示例配置：

Listen 80
Listen 8080

<VirtualHost 172.20.30.40:80>
    ServerName www.example.com
    DocumentRoot "/www/domain-80"
</VirtualHost>

<VirtualHost 172.20.30.40:8080>
    ServerName www.example.com
    DocumentRoot "/www/domain-8080"
</VirtualHost>

Answer 2

我使用以下Middleware 来处理 CORS 请求。如果没有类似的东西，您将无法支持向 Laravel 后端发出的 CORS 请求。

尝试使用类似以下的内容 - 当前设置为允许任何来源请求，在生产期间您可能希望将其收紧以仅允许来自已知来源的请求。

<?php

namespace App\Http\Middleware;

use Closure;
use Response;

class CorsMiddleware {

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        // setup array of CORS headers
        $headers = [
            'Access-Control-Allow-Origin'   => '*',
            'Access-Control-Allow-Methods'  => 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Headers'  => 'Content-Type, Accept, Origin, Authorization, X-Requested-With',
            'Access-Control-Allow-Credentials'  => true,
            'Access-Control-Expose-Headers' => 'Authorization',
        ];

        // check for OPTIONS request
        if( $request -> getMethod() == 'OPTIONS')
        {
            return Response::make('OK', 200, $headers);
        }

        // add CORS headers to remaining requests
        $response = $next($request);
        foreach( $headers as $key => $value )
        {
            $response -> headers -> set($key, $value);
        }

        return $response;
    }

}

您还可以查看此包以向 Laravel 添加 CORS 支持：https://github.com/barryvdh/laravel-cors