Question

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

这引出了我的问题 - 是否可以为前端/后端应用程序提供两台服务器（或至少一台服务器具有不同的端口 - 每个端口可以由不同的服务器提供服务）？ I知道这对于应该被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 - ＆gt; 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的不同服务器？

2 个答案: