错误：laravel中的CORS/VueJS ajax请求

Question

我在使用VueJS向我的Laravel应用程序发出一个AJAX请求时遇到了跨源问题。 我已经写了后端API与Laravel 5.3

Answer 1

这是一个Cors中间件使用：

namespace App\Http\Middleware; 

use Closure; 

class CorsMiddleware 
{ 
    public function handle($request, Closure $next) 
    { 
     $headers = [ 
      'Access-Control-Allow-Origin'  => '*', 
      'Access-Control-Allow-Methods'  => 'POST, GET, OPTIONS', 
      'Access-Control-Allow-Credentials' => 'true', 
      'Access-Control-Max-Age'   => '86400', 
      'Access-Control-Allow-Headers'  => 'Content-Type, Authorization, X-Requested-With' 
     ]; 

     if ($request->isMethod('OPTIONS')) { 
      return response()->json('{"method":"OPTIONS"}', 200, $headers); 
     } 

     $response = $next($request); 
     foreach($headers as $key => $value) { 
      $response->header($key, $value); 
     } 

     return $response; 
    } 
} 

Answer 2

如果你正在做一个XMLHttpRequest到不同的域比你的页面上，浏览器会阻止它，因为它通常允许出于安全原因，同一产地的请求。当你想做一个跨域请求时，你需要做一些不同的事情。有关如何实现该目标的教程是Using CORS。

当您使用邮递员时，他们不受此政策的限制。从Cross-Origin XMLHttpRequest报价：

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

为了解决这个问题，您的外部API服务器可以通过设置下列头支持CORS请求：

header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept'); 

可以通过laravel-cors完成作为意见提出。