vueのaxiosでlaravelのapiを叩いているのですが、corsのエラーの後にnetwork Errorと表示されてしまいます。

Question

vueのaxiosでlaravelのapiを叩いているのですが、corsのエラーの後にnetwork Errorと表示されてしまい、原因がわからない状態です。解決方法があれば教えていただけないでしょうか？

対策として下記を記述しております。

axios.interceptors.request.use(config => {
  console.log('axios cors config = ', config)
  setAccessToken(config);
  config.headers['X-XSRF-TOKEN'] = getCookieValue('XSRF-TOKEN')
  config.headers['X-Requested-With'] = 'XMLHttpRequest'
  config.headers['Content-Type'] = 'application/json'
  config.headers['withCredentials'] = true

  return config
})

また、エラーは下記になります。

Mixed Content: The page at 'https://xxx/login' was loaded over HTTPS, 
but requested an insecure XMLHttpRequest endpoint 
'http://xxx/'. This request has been blocked; the content must be served over HTTPS.


app.js?id=..... err auth login =  Error: Network Error
    at LYNF.e.exports (app.js?id=.....)
    at XMLHttpRequest.u.onerror (app.js?id=.....)

Answer 1

httpsで配信されたのページ上からhttpで配信されたコンテンツを読み込むとmixed contentエラーが発生します。

なのでaxiosの問題ではありません。

詳しくは以下を参照してください
https://developer.mozilla.org/ja/docs/Security/混在コンテンツ

なお、こういう時はエラーメッセージをそのままコピペしてググると、そのものズバリな回答がネット上に転がっていることが多いので、まずはエラーメッセージをコピペして調べると良いと思います