CORS Laravel VueJS [英] CORS Laravel VueJS

问题描述

我正在尝试使用 axios 从 VueJS 到 Laravel，这是我的 API.

I'm trying to do a get with axios from VueJS to Laravel which is my API.

我收到此错误:

在 'http://api.test/api/events/1/<访问 XMLHttpRequest/a>' from origin >'http://localhost:8080' 已被 CORS 策略阻止:No 'Access-Control->Allow-Origin' 标头存在于请求的资源上.

Access to XMLHttpRequest at 'http://api.test/api/events/1/' from origin >'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control->Allow-Origin' header is present on the requested resource.

未捕获(承诺)错误:网络错误在 createError (createError.js?2d83:16)在 XMLHttpRequest.handleError (xhr.js?b50d:87)

Uncaught (in promise) Error: Network Error at createError (createError.js?2d83:16) at XMLHttpRequest.handleError (xhr.js?b50d:87)

我尝试在 here 但它对我不起作用，或者我做得不好?

I've tried to create a middleware named 'cors' like here but it's not working for me or maybe I'm doing it badly ?

奇怪的事情?是与 Postman 合作.

Strange thing ? is that's working with Postman.

感谢您的帮助！:)

推荐答案

服务器用于托管网页、应用程序、图像、字体和多得多.当您使用网络浏览器时，您可能会尝试访问不同的网站(托管在服务器上).网站经常要求这些来自不同位置(服务器)的托管资源互联网.服务器上的安全策略可降低相关风险请求托管在不同服务器上的资产.让我们来看看安全策略示例:同源.

Servers are used to host web pages, applications, images, fonts, and much more. When you use a web browser, you are likely attempting to access a distinct website (hosted on a server). Websites often request these hosted resources from different locations (servers) on the Internet. Security policies on servers mitigate the risks associated with requesting assets hosted on different server. Let's take a look at an example of a security policy: same-origin.

同源策略非常严格.根据这项政策，一个托管在服务器 A 上的文档(即，像网页一样)只能交互与服务器 A 上的其他文档一起使用.简而言之，同源策略强制执行与每个文档交互的文档其他同源.

The same-origin policy is very restrictive. Under this policy, a document (i.e., like a web page) hosted on server A can only interact with other documents that are also on server A. In short, the same-origin policy enforces that documents that interact with each other have the same origin.

<小时>

检查这个为 Laravel 使用而制作的 CORS 库.安装很简单:

$ composer require barryvdh/laravel-cors
$ php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

默认设置在 config/cors.php

return [
     /*
     |--------------------------------------------------------------------------
     | Laravel CORS
     |--------------------------------------------------------------------------
     |
     | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
     | to accept any value.
     |
     */
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['Content-Type', 'X-Requested-With'],
    'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
    'exposedHeaders' => [],
    'maxAge' => 0,
];

allowedOrigins、allowedHeaders 和 allowedMethods 可以设置为 array('*') 以接受任何值.

allowedOrigins, allowedHeaders and allowedMethods can be set to array('*') to accept any value.

要允许所有路由使用 CORS，请在 app/Http/Kernel.php 类的 $middleware 属性中添加 HandleCors 中间件:

To allow CORS for all your routes, add the HandleCors middleware in the $middleware property of app/Http/Kernel.php class:

protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

如果您想在特定的中间件组或路由上允许 CORS，请将 HandleCors 中间件添加到您的组:

If you want to allow CORS on a specific middleware group or route, add the HandleCors middleware to your group:

protected $middlewareGroups = [
    'web' => [
       // ...
    ],

    'api' => [
        // ...
        \Barryvdh\Cors\HandleCors::class,
    ],
];

https://www.codecademy.com/articles/what-is-cors

这篇关于CORS Laravel VueJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！