laravel + vue + axios で OpenWeatherMapAPI から天気を取得したい

前提・実現したいこと

タイトル通りのことをしたいです。

発生している問題・エラーメッセージ

405エラーが帰ってきてしまいます。以下はエラーメッセージになります。

Access to XMLHttpRequest at 'http://api.openweathermap.org/data/2.5/weather?id='hogehoge'&units=metric&appid=fugafuga' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

該当のソースコード

以下、該当のvueコンポーネントです。

vue
1<template>
2    <div>
3        <h1>{{ weather.weather.main }}</h1>
4    </div>
5</template>
6
7<script>
8export default {
9    created() {
10        this.getWeather()
11    },
12    data() {
13        return {
14            weather: []
15        }
16    },
17    methods: {
18        getWeather() {
19            this.$http.get('http://api.openweathermap.org/data/2.5/weather?id=hogehoge&units=metric&appid=fugafuga')
20            .then(function(response){
21                this.weather = response.data
22            }.bind(this))
23            .catch(function(error){
24                console.log(error)
25            })
26        }
27    }
28}
29</script>

以下、bootstrap.jsの設定です。

js
1import Vue from 'vue'
2
3window._ = require('lodash');
4
5try {
6    window.Popper = require('popper.js').default;
7    window.$ = window.jQuery = require('jquery');
8
9    require('bootstrap');
10} catch (e) {}
11
12
13window.axios = require('axios')
14
15window.axios.defaults.headers.common = {
16    'X-CSRF-TOKEN': window.Laravel.csrfToken,
17    'X-Requested-With': 'XMLHttpRequest'
18}
19
20Vue.prototype.$http = window.axios
21
22let token = document.head.querySelector('meta[name="csrf-token"]');
23
24if (token) {
25    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
26} else {
27    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
28}

以下、HTMLファイルです。

HTML
1<!DOCTYPE html>
2<html lang="{{ config('app.locale') }}">
3    <head>
4        <meta charset="utf-8">
5        <meta http-equiv="X-UA-Compatible" content="IE=edge">
6        <meta name="viewport" content="width=device-width, initial-scale=1">
7        <meta name="csrf-token" content="{{ csrf_token() }}">
8        <title>app</title>
9        <link rel="stylesheet" href="{{ mix('css/app.css') }}"></script>
10        <script>
11            window.Laravel = {
12                csrfToken: "{{ csrf_token() }}"
13            };
14        </script>
15    </head>
16    <body>
17        <div id="app">
18            <router-view></router-view>
19        </div>
20    </body>
21    <script src="{{ mix('js/app.js') }}"></script>
22</html>

試したこと

curlでURLが情報を返してくれることは確認済みです。
get,put,postは一通り確認しましたが、いづれも405が帰ってきてしまいました。

最近、JavaScriptを勉強し始めたばかりでかなり初歩的な質問で申し訳ありませんが、わかる方いらっしゃいましたらご教示ください。

行動規範の内容に同意します

回答1件

ベストアンサー

CORSならブラウザのJavaScriptからはどうやっても無理なので
OpenWeatherMapAPIはLaravel側で取得してそのまま出力。
Vue側はLaravelを見に行く。

一番簡易的な方法にしてるけど本当はGuzzle使ったほうがいい。

routes/api.php

Route::get('weather', function() {
  $url = 'http://api.openweathermap.org/data/2.5/weather...';
  return file_get_contents($url);
});

Vue側

getWeather() {
    axios.get('/api/weather')
    .then()

投稿2019/01/17 14:45

kawax

総合スコア10377

退会済みユーザー

2019/01/17 14:58

動作しました。 Guzzleについても検討したいとおもいます。ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！