how to fix ‘Access to XMLHttpRequest has been blocked by CORS policy’ Redirect is not allowed for a preflight request only one route

by

Permanent solution from server side:

The best and secure solution is to allow access control from server end. For laravel you can follow the following steps:

In App\Http\Middleware\Cors.php:

public function handle($request, Closure $next)
{
    return $next($request)->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods','GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS');
}

In App\Http\Kernel.php:

protected $middleware = [
    ...
    \App\Http\Middleware\Cors::class,
];

Temporary solution from browser side:

If you want to disable CORS from browser-end then follow one of the following steps:

Safari: Enable the develop menu from Preferences > Advanced. Then select “Disable Cross-Origin Restrictions” from the develop menu.

Chrome (Extension): Use the Chrome extension Allow CORS: Access-Control-Allow-Origin

Chrome (CMD): Close all your Chrome browser and services. Then run the following command:

Windows:

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –-allow-file-access-from-files --disable-web-security --user-data-dir --disable-features=CrossSiteDocumentBlockingIfIsolating

Mac:

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome — args — user-data-dir=”/tmp/chrome_dev_test” — disable-web-security

More Related Contents:

  1. Use arrow function in vue computed does not work
  2. Vue.js dynamic images not working
  3. How to add external JS scripts to VueJS Components?
  4. How to use .env variables in Nuxt 2 or 3?
  5. Vue 2 – Mutating props vue-warn
  6. Communication between sibling components in Vue.js 2.0
  7. VueJS: why is “this” undefined?
  8. Make VueJS and jQuery play nice
  9. VueJs 2.0 emit event from grand child to his grand parent component
  10. Can I pass parameters in computed properties in Vue.Js
  11. [Vue warn]: Property or method is not defined on the instance but referenced during render
  12. Vue – Deep watching an array of objects and calculating the change?
  13. How to call function on child component on parent events
  14. Passing props dynamically to dynamic component in VueJS
  15. Vuejs typescript this.$refs..value does not exist
  16. How to install jQuery into Nuxt.js?
  17. Is there any way to ‘watch’ for localstorage in Vuejs?
  18. Access vue instance/data inside filter method
  19. Parentheses while calling a method in Vue
  20. Methods vs Computed in Vue
  21. Vue js error: Component template should contain exactly one root element
  22. Vue template or render function not defined yet I am using neither?
  23. Global data with VueJs 2
  24. How to set a component non-reactive data in Vue 2?
  25. How to use Vuetify tabs with vue-router
  26. How to limit iteration of elements in `v-for`
  27. Detect Back Button in Navigation Guards of Vue-Router
  28. When should I use Vuex?
  29. VueJS conditionally add an attribute for an element
  30. How to pass an object as props with vue router?

Leave a Comment