AngularJS 和 PHP 的服务器不同？

Question

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

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

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

最初的问题是由著名的 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));
    }
  );

当我向本地主机发出请求时，出现了 -1 错误，但我向 http://jsonplaceholder.typicode.com/posts 发出的请求给出了预期的答案。我尝试使用我的外部 IP 地址而不是本地主机，但错误仍然存在。我的服务器端代码显然使用了 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

AngularJS 和 PHP 的服务器不同？

Different servers for AngularJS and PHP?

rest

jsonp

laravel

angularjs