[{"data":1,"prerenderedAt":263},["ShallowReactive",2],{"article-preflight-redirect-cors-error":3},{"id":4,"title":5,"body":6,"category":249,"createdAt":251,"description":5,"extension":252,"index":253,"meta":254,"navigation":255,"path":256,"publish":255,"seo":257,"series":253,"seriesTitle":253,"stem":258,"tag":259,"thumbnail":253,"updatedAt":253,"__hash__":262},"articles\u002Farticles\u002Fpreflight-redirect-cors-error.md","URL正規化によって Redirect is not allowed for a preflight request でCORSエラーが起きた",{"type":7,"value":8,"toc":247},"minimark",[9,13,24,31,63,77,80,223,237,243],[10,11,12],"p",{},"こんにちはjunです。LaravelとNuxt SPAでアプリを作っていたのですがCORS設定をしているのに偶に以下のようなエラーが発生していました。",[14,15,20],"pre",{"className":16,"code":18,"language":19},[17],"language-text","Access to XMLHttpRequest at 'http:\u002F\u002Flocalhost\u002Fapi\u002Fv1\u002Ftest\u002F' from origin 'http:\u002F\u002Flocalhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.\n","text",[21,22,18],"code",{"__ignoreMap":23},"",[10,25,26,27,30],{},"エラー内容の通り原因はpreflightリクエストがリダイレクトされてしまっていることが原因です。開発者ツールでnetworkを見ると確かにpreflightリクエストが301となっていることが原因です。しかしなぜリダイレクト？Laravelでredirectを返すメソッドがあるのかと思いましたが、原因は",[21,28,29],{},".htaccess","の以下の記述でした。",[14,32,35],{"className":33,"code":34,"language":29,"meta":23,"style":23},"language-.htaccess shiki shiki-themes material-theme-ocean","#Redirect Trailing Slashes If Not A Folder...\nRewriteCond %{REQUEST_FILENAME} !-d\nRewriteCond %{REQUEST_URI} (.+)\u002F$\nRewriteRule ^ %1 [L,R=301]\n",[21,36,37,45,51,57],{"__ignoreMap":23},[38,39,42],"span",{"class":40,"line":41},"line",1,[38,43,44],{},"#Redirect Trailing Slashes If Not A Folder...\n",[38,46,48],{"class":40,"line":47},2,[38,49,50],{},"RewriteCond %{REQUEST_FILENAME} !-d\n",[38,52,54],{"class":40,"line":53},3,[38,55,56],{},"RewriteCond %{REQUEST_URI} (.+)\u002F$\n",[38,58,60],{"class":40,"line":59},4,[38,61,62],{},"RewriteRule ^ %1 [L,R=301]\n",[10,64,65,66,68,69,72,73,76],{},"上記はLaravelが使用するURLの正規化を行う",[21,67,29],{},"の記述です。URLの末尾にスラッシュがある場合、ないように正規化してくれます。",[21,70,71],{},"http:\u002F\u002Flocalhost\u002Ftest\u002F","→",[21,74,75],{},"http:\u002F\u002Flocalhost\u002Ftest"," のようにリダイレクトがおきます。これはAPIルートでも発生します。",[10,78,79],{},"私のAPIリクエストを見てみると",[14,81,85],{"className":82,"code":83,"language":84,"meta":23,"style":23},"language-javascript shiki shiki-themes material-theme-ocean","async test(){\n    this.$axios.post('\u002Fv1\u002Ftest\b\u002F')\n    .then(res=>[\n        console.log(res)\n    ])\n    .catch(err=>{\n        console.log(err)\n    })\n}\n","javascript",[21,86,87,104,134,155,171,177,194,209,217],{"__ignoreMap":23},[38,88,89,93,97,100],{"class":40,"line":41},[38,90,92],{"class":91},"s0W1g","async ",[38,94,96],{"class":95},"sdLwU","test",[38,98,99],{"class":91},"()",[38,101,103],{"class":102},"sAklC","{\n",[38,105,106,109,112,115,118,122,125,129,131],{"class":40,"line":47},[38,107,108],{"class":102},"    this.",[38,110,111],{"class":91},"$axios",[38,113,114],{"class":102},".",[38,116,117],{"class":95},"post",[38,119,121],{"class":120},"s-wAU","(",[38,123,124],{"class":102},"'",[38,126,128],{"class":127},"sfyAc","\u002Fv1\u002Ftest\b\u002F",[38,130,124],{"class":102},[38,132,133],{"class":120},")\n",[38,135,136,139,142,144,148,152],{"class":40,"line":53},[38,137,138],{"class":102},"    .",[38,140,141],{"class":95},"then",[38,143,121],{"class":120},[38,145,147],{"class":146},"s7ZW3","res",[38,149,151],{"class":150},"sJ14y","=>",[38,153,154],{"class":120},"[\n",[38,156,157,160,162,165,167,169],{"class":40,"line":59},[38,158,159],{"class":91},"        console",[38,161,114],{"class":102},[38,163,164],{"class":95},"log",[38,166,121],{"class":120},[38,168,147],{"class":91},[38,170,133],{"class":120},[38,172,174],{"class":40,"line":173},5,[38,175,176],{"class":120},"    ])\n",[38,178,180,182,185,187,190,192],{"class":40,"line":179},6,[38,181,138],{"class":102},[38,183,184],{"class":95},"catch",[38,186,121],{"class":120},[38,188,189],{"class":146},"err",[38,191,151],{"class":150},[38,193,103],{"class":102},[38,195,197,199,201,203,205,207],{"class":40,"line":196},7,[38,198,159],{"class":91},[38,200,114],{"class":102},[38,202,164],{"class":95},[38,204,121],{"class":120},[38,206,189],{"class":91},[38,208,133],{"class":120},[38,210,212,215],{"class":40,"line":211},8,[38,213,214],{"class":102},"    }",[38,216,133],{"class":120},[38,218,220],{"class":40,"line":219},9,[38,221,222],{"class":102},"}\n",[10,224,225,226,228,229,232,233,236],{},"URLをみてみると",[21,227,128],{},"と末尾にスケジュール があります。そしてXHRは ",[21,230,231],{},"POST + contetnt-type:application\u002Fjson"," のようなリクエストではpreflightリクエストが飛びますが、そのリクエストはリダイレクトをしてはいけません。そのためURLを",[21,234,235],{},"\u002Fv1\u002Ftest\b","と末尾をなくしてあげたらリダイレクトが起きず、問題なくCORSが起きなくなりました。",[10,238,239,240,242],{},"CORSの設定やLaravelのメソッドを調べていましたが、結構簡単な",[21,241,29],{},"が原因でした。",[244,245,246],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}",{"title":23,"searchDepth":53,"depth":53,"links":248},[],[250],"ministack","2021-09-19","md",null,{},true,"\u002Farticles\u002Fpreflight-redirect-cors-error",{"title":5,"description":5},"articles\u002Fpreflight-redirect-cors-error",[260,261],"infrastructure","network","ia4jjF7K85Ze8kJeV-fqRUKhfJsuBqIgYCJYkocy2u0",1780987148432]