  {"id":1017,"date":"2022-11-23T16:49:59","date_gmt":"2022-11-23T16:49:59","guid":{"rendered":"https:\/\/247blogs.com\/wp\/laravel-9-tutorial-laravel-9-cors-example-how-to-enable-cors-in-laravel\/"},"modified":"2022-11-23T16:49:59","modified_gmt":"2022-11-23T16:49:59","slug":"laravel-9-tutorial-laravel-9-cors-example-how-to-enable-cors-in-laravel","status":"publish","type":"post","link":"https:\/\/247blogs.com\/wp\/laravel-9-tutorial-laravel-9-cors-example-how-to-enable-cors-in-laravel\/","title":{"rendered":"Laravel-9 Tutorial &#8211; Laravel 9 CORS Example: How to Enable CORS in Laravel?"},"content":{"rendered":"<div id=\"\">\n<div class=\"LinkedBlock\" readability=\"24.458498023715\"> Aren\u2019t you able to share the resources between two servers or domains? Well, if you are going gaga over this enigma, then we have a solution for you. <\/p>\n<p>In this tutorial, i will teach you how to easily enable CORS (Cross-Origin Resource Sharing) in Laravel and work with it. You can install CORS and configure it to get rid of CORS header <strong>\u2018access-control-allow-origin\u2019<\/strong> missing problem.<\/p>\n<p>Well, generally this problem occurs when the request is made from another server or origin because of security concern consensus doesn\u2019t established between two servers. In response, we usually get No \u2018Access-Control-Allow-Origin\u2019 header is present on the requested resource.\u201d warning. CORS authenticate the coherence between two different domains.<\/p>\n<p><strong>Read more:<\/strong> <a href=\"https:\/\/www.positronx.io\/laravel-angular-token-based-authentication-with-jwt\/\">Laravel JWT Token-Based Authentication with Angular<\/a><\/p>\n<blockquote readability=\"6.6926829268293\">\n<p>Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served.<br \/><a href=\"https:\/\/en.wikipedia.org\/wiki\/Cross-origin_resource_sharing#:~:text=Cross%2Dorigin%20resource%20sharing%20(CORS,scripts%2C%20iframes%2C%20and%20videos.\" target=\"_blank\" rel=\"noopener noreferrer\">wikipedia<\/a><\/p>\n<\/blockquote>\n<\/div>\n<div id=\"tc_11123_01\" class=\"LinkedBlock\" readability=\"15\">\n<h2>Laravel 9 CORS Example<\/h2>\n<p>How to enable CORS in your REST API backend? First, we have to install a fresh Laravel app.<\/p>\n<pre class=\" language-bash\"><code class=\" language-bash\">composer create-project laravel\/laravel laravel-cors-tutorial --prefer-dist<\/code><\/pre>\n<p>Enter into the project folder:<\/p>\n<pre class=\" language-bash\"><code class=\" language-bash\">cd laravel-cors-tutorial<\/code><\/pre>\n<p>If you have already installed the app then skip it and run the command to start the test the CORS in laravel app.<\/p>\n<pre class=\" language-markup\"><code class=\" language-bash\">php artisan serve<\/code><\/pre>\n<\/div>\n<div id=\"tc_11123_02\" class=\"LinkedBlock\" readability=\"21\">\n<h2>CORS Middleware Nitty-Gritty<\/h2>\n<p>Along with new app installation, config\/cors.php file also generated. Laravel allows following cors related configurations.<\/p>\n<ul>\n<li>CORS configuration paths<\/li>\n<li>Allowed methods<\/li>\n<li>Allowed origins patterns<\/li>\n<li>Allowed headers<\/li>\n<li>Exposed headers<\/li>\n<li>Max age<\/li>\n<li>Supports credentials<\/li>\n<\/ul>\n<pre class=\" language-markup\"><code class=\" language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\"><?php<\/span>\n<span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">[<\/span>\n    \n    <span class=\"token single-quoted-string string\">'paths'<\/span> <span class=\"token operator\">=<\/span><span class=\"token operator\">><\/span> <span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'api\/*'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token single-quoted-string string\">'allowed_methods'<\/span> <span class=\"token operator\">=<\/span><span class=\"token operator\">><\/span> <span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'*'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token single-quoted-string string\">'allowed_origins'<\/span> <span class=\"token operator\">=<\/span><span class=\"token operator\">><\/span> <span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'*'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token single-quoted-string string\">'allowed_origins_patterns'<\/span> <span class=\"token operator\">=<\/span><span class=\"token operator\">><\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token single-quoted-string string\">'allowed_headers'<\/span> <span class=\"token operator\">=<\/span><span class=\"token operator\">><\/span> <span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'*'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token single-quoted-string string\">'exposed_headers'<\/span> <span class=\"token operator\">=<\/span><span class=\"token operator\">><\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token single-quoted-string string\">'max_age'<\/span> <span class=\"token operator\">=<\/span><span class=\"token operator\">><\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token single-quoted-string string\">'supports_credentials'<\/span> <span class=\"token operator\">=<\/span><span class=\"token operator\">><\/span> <span class=\"token boolean constant\">false<\/span><span class=\"token punctuation\">,<\/span>\n<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><\/span><\/code><\/pre>\n<\/div>\n<div id=\"tc_11123_03\" class=\"LinkedBlock\" readability=\"14\">\n<h2>Create API in Laravel<\/h2>\n<p>To enable CORS in API, we need to have one, go to <strong>routes\/api.php<\/strong> and incorporate the given below code.<\/p>\n<pre class=\" language-markup\"><code class=\"  language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\"><?php<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">Illuminate<span class=\"token punctuation\"><\/span>Http<span class=\"token punctuation\"><\/span>Request<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">use<\/span> <span class=\"token package\">Illuminate<span class=\"token punctuation\"><\/span>Support<span class=\"token punctuation\"><\/span>Facades<span class=\"token punctuation\"><\/span>Route<\/span><span class=\"token punctuation\">;<\/span>\n\nRoute<span class=\"token punctuation\">:<\/span><span class=\"token punctuation\">:<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token single-quoted-string string\">'\/demo-url'<\/span><span class=\"token punctuation\">,<\/span>  <span class=\"token keyword\">function<\/span>  <span class=\"token punctuation\">(<\/span>Request <span class=\"token variable\">$request<\/span><span class=\"token punctuation\">)<\/span>  <span class=\"token punctuation\">{<\/span>\n   <span class=\"token keyword\">return<\/span> <span class=\"token function\">response<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token operator\">-<\/span><span class=\"token operator\">><\/span><span class=\"token function\">json<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'Laravel CORS Demo'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><\/code><\/pre>\n<\/div>\n<div id=\"tc_11123_04\" class=\"LinkedBlock\" readability=\"20\">\n<h2>Make Http GET Request with AJAX<\/h2>\n<p>We will send the Http GET request using AJAX. To, manifest a new HTML template, name it <strong>demo.html<\/strong>. Call jQuery CDN link and define the AJAX function and pass the Laravel API to get the response.<\/p>\n<pre class=\" language-markup\"><code class=\" language-markup\"><span class=\"token doctype\"><span class=\"token punctuation\"><!<\/span><span class=\"token name\">doctype<\/span> <span class=\"token name\">html<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><<\/span>html<\/span> <span class=\"token attr-name\">lang<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>en<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n    \n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><<\/span>meta<\/span> <span class=\"token attr-name\">charset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>utf-8<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><<\/span>meta<\/span> <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>viewport<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">content<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>width=device-width, initial-scale=1, shrink-to-fit=no<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n    \n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><<\/span>link<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>stylesheet<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css<span class=\"token punctuation\">\"<\/span><\/span>\n        <span class=\"token attr-name\">integrity<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">crossorigin<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>anonymous<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><<\/span>title<\/span><span class=\"token punctuation\">><\/span><\/span>Laravel CORS Middleware Demo<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><\/<\/span>title<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><\/<\/span>head<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><<\/span>body<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><<\/span>script<\/span> <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/cdn.jsdelivr.net\/npm\/jquery@3.5.1\/dist\/jquery.min.js<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">><\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><\/<\/span>script<\/span><span class=\"token punctuation\">><\/span><\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><<\/span>script<\/span><span class=\"token punctuation\">><\/span><\/span>\n        $.ajax({\n            type: \"GET\",\n            dataType: \"json\",\n            url: 'http:\/\/localhost:8000\/demo-url',\n            success: function (data) {\n                console.log(data);\n            }\n        });\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><\/<\/span>script<\/span><span class=\"token punctuation\">><\/span><\/span>\n    \n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><\/<\/span>body<\/span><span class=\"token punctuation\">><\/span><\/span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><\/<\/span>html<\/span><span class=\"token punctuation\">><\/span><\/span><\/code><\/pre>\n<\/div>\n<div id=\"tc_11123_05\" class=\"LinkedBlock\" readability=\"13\">\n<h2>Malevolent Laravel CORS Error<\/h2>\n<p>As we can see a CORS related error (No \u2018Access-Control-Allow-Origin\u2019 header is present on the requested resource.), it occurred because we have two different domain trying to exchange data with each other. And yes we haven\u2019t even enabled the CORS yet.<\/p>\n<pre class=\" language-markup\"><code class=\" language-bash\">Access to XMLHttpRequest at <span class=\"token string\">'http:\/\/localhost:8000\/demo-url'<\/span> from origin <span class=\"token string\">'null'<\/span> \nhas been blocked by CORS policy: No <span class=\"token string\">'Access-Control-Allow-Origin'<\/span> header is \npresent on the requested resource.<\/code><\/pre>\n<\/div>\n<div id=\"tc_11123_06\" class=\"LinkedBlock\" readability=\"9.8365384615385\">\n<h2>Installing CORS Package in Laravel<\/h2>\n<p>As we have known what the ailment is, and now turn to cure this. With the help of Composer just Install <a href=\"https:\/\/github.com\/fruitcake\/laravel-cors\" rel=\"noopener noreferrer\" target=\"_blank\">fruitcake\/laravel-cors<\/a> package.<\/p>\n<pre class=\" language-markup\"><code class=\"  language-bash\"><span class=\"token function\">composer<\/span> require fruitcake\/laravel-cors<\/code><\/pre>\n<\/div>\n<div id=\"tc_11123_07\" class=\"LinkedBlock\" readability=\"18\">\n<h2>Registering CORS Middleware<\/h2>\n<p>We have added the quintessential CORS (Cross-Origin Resource Sharing) headers support in your Laravel application. Now, we have to configure it in our application.<\/p>\n<p>Lastly, include <strong>FruitcakeCorsHandleCors<\/strong> class at the top inside <code>$middleware<\/code> array to enable CORS for all our routes in <strong>app\/Http\/Kernel.php<\/strong> file.<\/p>\n<pre class=\" language-markup\"><code class=\" language-php\"><span class=\"token keyword\">protected<\/span> <span class=\"token variable\">$middleware<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span>\n  <span class=\"token package\">Fruitcake<span class=\"token punctuation\"><\/span>Cors<span class=\"token punctuation\"><\/span>HandleCors<\/span><span class=\"token punctuation\">:<\/span><span class=\"token punctuation\">:<\/span><span class=\"token keyword\">class<\/span><span class=\"token punctuation\">,<\/span>\n    \n    \n<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p>We have implemented the CORS in Laravel to deal with resource sharing for different domains.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Aren\u2019t you able to share the resources between two servers or domains? Well, if you are going gaga over this enigma, then we have a solution for you. In this [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1018,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-1017","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","clearfix"],"_links":{"self":[{"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/posts\/1017","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/comments?post=1017"}],"version-history":[{"count":0,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/posts\/1017\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/media\/1018"}],"wp:attachment":[{"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/media?parent=1017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/categories?post=1017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/247blogs.com\/wp\/wp-json\/wp\/v2\/tags?post=1017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}