<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>非同期通信 &#8211; エンジニア見習い</title>
	<atom:link href="https://otonan-syusyoku.work/archives/tag/%e9%9d%9e%e5%90%8c%e6%9c%9f%e9%80%9a%e4%bf%a1/feed" rel="self" type="application/rss+xml" />
	<link>https://otonan-syusyoku.work</link>
	<description>三流プログラマー</description>
	<lastBuildDate>Mon, 06 Mar 2023 06:03:34 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://otonan-syusyoku.work/wp-content/uploads/2023/10/cropped-名称未設定のデザイン-16-32x32.png</url>
	<title>非同期通信 &#8211; エンジニア見習い</title>
	<link>https://otonan-syusyoku.work</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【Laravel】axiosを使った非同期通信が404になる</title>
		<link>https://otonan-syusyoku.work/archives/1270</link>
					<comments>https://otonan-syusyoku.work/archives/1270#respond</comments>
		
		<dc:creator><![CDATA[hrokig2]]></dc:creator>
		<pubDate>Mon, 06 Mar 2023 06:03:34 +0000</pubDate>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[JS]]></category>
		<category><![CDATA[Laravel]]></category>
		<category><![CDATA[Vue]]></category>
		<category><![CDATA[非同期通信]]></category>
		<guid isPermaLink="false">https://otonan-syusyoku.work/?p=1270</guid>

					<description><![CDATA[エラー内容 レスポンス： AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_RE [&#8230;]]]></description>
										<content:encoded><![CDATA[<h2>エラー内容</h2>
<p>レスポンス：</p>
<pre class="line-numbers"><code class="language-js">AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST',</code></pre>
<p>&nbsp;</p>
<p>考えられる原因：</p>
<ul>
<li>ルーティングを間違えている</li>
<li>通信先のURLが間違えている</li>
</ul>
<p>&nbsp;</p>
<h2>404になる原因</h2>
<p>Routeの設定を行っているのにレスポンスがになってしまう。</p>
<p>解決方法はエラーの文言通り、ページが存在していない事が原因です。</p>
<h3>エラーになるコード</h3>
<p>routes/api.php</p>
<pre class="line-numbers"><code class="language-php">Route::get(
    '/test',
    [Test::class, 'test_function']
);</code></pre>
<p>&nbsp;</p>
<p>resources/js/components/EnduserSearchstore.vue</p>
<pre class="line-numbers"><code class="language-js">import axios from 'axios';

    export default {
        data() {
            return {
                users: {},
            }
        },
        methods: {
            getBigCategory() {
                axios.get('/api_search_storeCategory')
                    .then((response) =&gt; {
                        // this.users = response.data.users
                        response(console.log(response))
                    })
            }
        },
        created() {
            this.getBigCategory()
        }
    }</code></pre>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>正常動作するコード</h3>
<p>routes/api.php</p>
<pre class="line-numbers"><code class="language-php">Route::get(
    '/test',
    [Test::class, 'test_function']
);</code></pre>
<p>&nbsp;</p>
<p>resources/js/components/EnduserSearchstore.vue</p>
<pre class="line-numbers"><code class="language-js">import axios from 'axios';

    export default {
        data() {
            return {
                users: {},
            }
        },
        methods: {
            getBigCategory() {
                axios.get('/api/test')
                    .then((response) =&gt; {
                        // this.users = response.data.users
                        response(console.log(response))
                    })
            }
        },
        created() {
            this.getBigCategory()
        }
    }</code></pre>
<p>&nbsp;</p>
<h3> 修正内容</h3>
<p>axiosでURLを指定している箇所を「<strong>axios.get(&#8216;/api/test&#8217;)</strong>」と指定してあげる。</p>
<p>Laravelでは、route/api.phpで指定したルーティングではデフォルトで接頭辞に「/api」が付くことになっているっぽいです。<br />
そのため、エラーになるコードではVue側で呼び出しているURLは存在しない遷移先となっています。</p>
<p>LaravelのAPIのルーティングはデフォルトが付くのを忘れないようにしましょう〜。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://otonan-syusyoku.work/archives/1270/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
