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

Posted 2023-03-04

【中文标题】错误：laravel/VueJS ajax 请求中的 CORS

【英文标题】：Error: CORS in laravel/VueJS ajax request

【发布时间】：2017-04-21 19:21:40

【问题描述】：

我在使用 VueJS 向我的 Laravel 应用程序发送 AJAX 请求时遇到了跨源问题。 我用 Laravel 5.3 编写了后端 API

【问题讨论】：

您需要在 API 中处理原始请求。你可以使用这样的东西：github.com/barryvdh/laravel-cors

在提问或至少在 Stack 的搜索之前，您应该始终使用 google。你至少会得到几个答案，而不会像很多人一样问同样的问题

【参考方案1】：

如果您向与页面所在域不同的域发送XMLHttpRequest，您的浏览器将阻止它，因为出于安全原因，它通常允许来自同一来源的请求。当您想要进行跨域请求时，您需要做一些不同的事情。 Using CORS 是一个关于如何实现的教程。

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

常规网页可以使用 XMLHttpRequest 对象从远程服务器发送和接收数据，但它们受到同源策略的限制。扩展并没有那么有限。只要首先请求跨域权限，扩展程序就可以与其源之外的远程服务器通信。

要解决这个问题，您的外部 API 服务器必须通过设置以下标头来支持 cors 请求：

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

可以按照 cmets 中的建议由 laravel-cors 完成。

【参考方案2】：

这是我使用的 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;
    

【讨论】：

谢谢！我更新了这个中间件并与我的 laravel 5.3 一起使用