APIのまとめ方
Nuxt.jsでFlaskで作成した外部APIに接続するアプリケーションを作成しています。
そこで、APIをどこか一つにまとめておきたいのですが、その場合のベストプラクティスはどのようになるでしょうか。
英語も含めいろいろと調べてみましたが、これといったものが見つかりませんでした。
また、Vueの場合は以下のように2つのファイルを使用してまとめていました。
vue
1// component/ApiClient.vue 2<script> 3import axios from 'axios' 4 5const baseUrl = process.env.API_BASE_URI 6axios.defaults.withCredentials = true 7 8export default { 9 data () { 10 return {} 11 }, 12 create: function (path, params, callback, errorHandler) { 13 let targetPath = baseUrl + path 14 axios.post(targetPath, params).then((response) => { 15 callback(response) 16 }).catch(function (error) { 17 errorHandler(error) 18 }) 19 }, 20 ...
vue
1// component/MyService.vue 2<script> 3import ApiClient from './ApiClient' 4 5export default { 6 name: 'MyService', 7 uploadedSounds: function (params, callback, errorHandler) { 8 let targetPath = `/uploaded_sounds` 9 ApiClient.create( 10 targetPath, 11 params, 12 (response) => {callback(response)}, 13 (error) => {errorHandler(error)} 14 ) 15 }, 16...
CORSについて
また、pagesフォルダ内のvueファイルでaxiosを用いたapiの呼び出しを行うと問題ないのですが、Nuxt.jsの場合、上記vueファイルの様に他のファイルにapiの機能を書き出し、それを呼び出した場合に限りCORS関連のエラーが発生します。
componentフォルダ以外にも、自分でapiというフォルダを作成した場合も、そのフォルダ内のapi呼び出しの処理はCORSエラーが発生しました。
NuxtでCORSエラーが発生した場合の対処も行いました。
具体的には、nuxt.config.js
で以下のようにaxiosを設定してみたり、proxyにいろいろ書き足したりしてみましたが解決しませんでした。
js
1 axios: { 2 proxy: true, 3 baseURL: 'http://localhost:5000/api/', 4 proxyHeaders: false, 5 credentials: false 6 }, 7 8 proxy: { 9 '/api/': { 10 target: 'http://localhost:5000', 11 pathRewrite: {'^/api': '/'} 12 } 13 },
もちろんFlask側で CORS(app, resources={'/api/*': {'origins': '*'}})
のようなことはしているのですが原因が全くわかりません。
なにか少しでも手がかりになることがあればよろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。