3

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

I got this error :

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.

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

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 ?

Strange thing ? is that's working with Postman.

Thank for the help ! :)

J. Doe
  • 115
  • 2
  • 2
  • 12
  • 1
    Did you try the second answer? https://stackoverflow.com/a/40199615/1308765 – Linus Juhlin Jan 16 '19 at 14:07
  • 1
    I don't have any file named routes.php but I've tried on api\vendor\symfony\routing\Route.php and on \api\routes\api.php, am I doing it wrongly ? – J. Doe Jan 16 '19 at 14:18
  • 1
    @J.Doe Never edit anything in `vendor`. `api/routes/api.php` is the file to edit - Laravel used to have all routes in `routes.php`, but it's not split up into web and API versions. – ceejayoz Jan 16 '19 at 14:41
  • 1
    Are you using `vue-cli`? – ljubadr Jan 17 '19 at 05:43

3 Answers3

5

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.

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.


Check this CORS library made for Laravel usage. Installation is easy:

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

The defaults are set in 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 and allowedMethods can be set to array('*') to accept any value.

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,
];

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

Adis Azhar
  • 1,022
  • 1
  • 18
  • 37
  • Hi, I've tried it but it's still not working... I'm using Laragon as local server (so it's Apache server) if it can help to find the answer – J. Doe Jan 16 '19 at 14:44
  • Hi J.Doe, i found this post...how did you solve this? – Japa Nov 11 '21 at 09:31
1

Tried sending Axios request from Vue app to Laravel backend.

I had CORS Error and I couldn't find the solution.

After following request execution in vendor files I found out that I was simply testing it wrong.

I was testing on url: http://localhost/api, but in config/cors.php there is:

'paths' => ['api/*', 'sanctum/csrf-cookie'],

So all I had to do was to change request to http://localhost/api/... and it started working. Another solution is adding 'api' to paths array in config/cors.php if you want to use http://localhost/api

NoOorZ24
  • 2,914
  • 1
  • 14
  • 33
0

The problem you are facing is with the same origin policy. you can read about it on the Mozilla site (https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control). it is basally to proven un authorized access to web servers. you can change the way your web server reacts and i also in that link i have included.

Eningly
  • 73
  • 1
  • 6