[axios] タグが付いた質問
35
質問
0
票
1
回答
193
閲覧数
自作APIをAxios.getで叩きたい
APIを作成しました。
Postmanで目的のjsonデータを取得することができます。
フロントエンドでAxiosを用いると取得できません。
しばらく調べましたが、原因がわからなかったの教えていただきたいです。
よろしくお願いします。
Postman
GET http://localhost:4000/api/money/month
{
"date": "2022-...
0
票
1
回答
272
閲覧数
application/pdf タイプのレスポンスをNuxtプロジェクト上に表示したい
NuxtとRailsを利用してpdfを生成しています。
生成gemとしてprawnを採用しており、適切なparamsをapiに送信した場合にpdfが作成されることを確認できています。
axios経由でこのAPIを叩いたとき、application/pdf型
のレスポンスを、Nuxtプロジェクト上でPDFとして表示したいです。
知見ある方いらっしゃればご教授願いたいです。
params
{
...
1
票
1
回答
875
閲覧数
axiosでgetしたデータについて
前提・実現したいこと
以下のコードで22行目の console.log(getData()); から11行目のdataを出力したいと思っていますが、以下のようにエラーメッセージが出ます。
改善方法を教えていただけると幸いです。
よろしくお願い致します。
発生している問題・エラーメッセージ
data is not defined
該当のソースコード
let axios = require(&...
0
票
1
回答
58
閲覧数
Vue.jsとFirebaseでログイン機能を実装したいです。
前提・実現したいこと
Vue.jsとFirebaseでログイン機能を実装したいです。
新規登録画面で、v-modelでemailとpasswordそれぞれを結びつけ、作成したaxiosのインスタンスをimportして、axiosでエンドポイントにアクセスするregisterメソッドを定義、ボタンを押したらregisterメソッドを発火したいです。
成功すると、...
0
票
1
回答
403
閲覧数
http.getの結果を格納した配列の内容がundefinedになる
APIを叩いて取得した値を配列に入れて、任意のタイミングで取り出したいです。
const http = axios.create({
baseURL: 'base-url',
})
var a = []
function addArray () {
http.get('/hoge/fuga', { data: {} }).then(response => {
a....
0
票
0
回答
870
閲覧数
一度表示されたESLintのErrorがバグ修正後も表示され続ける(Nuxt.js)
一度表示されたESLintのErrorが、バグ修正後も表示され続けてしまいます。
バグ修正後に.eslintcacheファイルを削除して、アプリケーションを再起動するとエラーは表示されなくなります。
キャッシュファイルを削除せずとも、修正後はエラーが更新されるようにしたいです。
詳細
create-nuxt-appでアプリケーション作成後、index.vueを以下のように作成しました。
(...
0
票
1
回答
232
閲覧数
リアルタイムでtemplate内の変数を変化させたいです
現在、サーバーに対してリクエストをして、サーバー側でバリデーション後エラーメッセージを返すプログラムを作成しております。
エラーメッセージをサーバーから取得した後、エラーの内容をdata.messageに格納後、console.logを用いて表示した結果、正常に値が出力されていました。
それに伴い、リアルタイムでtemplate内のdata.messageが変わると考えていたのですが、...
0
票
1
回答
513
閲覧数
Material UIライブラリのサンプルテーブルを実装しようとしたらエラー rows.slice is not a functionが出る
現在、Material UIライブラリのドキュメントに載っているページネーションを使ったテーブルを作成したいと考えています。
追記:https://teratail.com/questions/311503 にも質問してあります。
具体的には、 https://material-ui.com/components/tables/ に載っているCustom pagination ...
1
票
2
回答
466
閲覧数
ReactでAxiosを使用し結果を表示する仕組みで、mapのエラー(TS105)となる
Reactを始めたばかりで質問がおかしければ申し訳ございません
単純にAxiosで取得した結果を画面に列挙するだけのを勉強しています
以下のコードです
import React, { useState } from 'react'
import axios from 'axios';
const searchGoogleBooks = async (searchString: string) =&...
0
票
1
回答
205
閲覧数
heroku(Nuxt)からheroku(rails)へのアクセスが404になる
ローカル(Nuxt)からheroku(rails)への通信は問題なく出来るのですが、
heroku(Nuxt)からaxiosでheroku(rails)へのアクセスしようとすると404エラーになります。
rails側のcorsの設定は問題ないと思われます。
404となっているのはNuxt側のherokuのログで分かりました。
rails側のログでリクエストが届いていないのも確認済みです。
...
0
票
1
回答
1,007
閲覧数
Nuxt Safariでアクセスすると、CORSエラーになってしまう
API側:Rails(ポート番号3002)
Client側:Nuxt(ポート番号7001)
で開発しています。
iOSのSafariから、192.168.x.xxx:7001でアクセスすると、NuxtからRails間の接続でCORSエラーとなってしまい、正常に接続ができない状況です。
XMLHttpRequest cannot load http://localhost:3002/api/v1/...
0
票
1
回答
4,165
閲覧数
POST送信で404 Not Found
vueコンポーネントでPOST送信した際に、404エラーが出て上手く動作しません。
ルーティングの設定などはちゃんと出来ていると思っているのですが、何が原因なのでしょうか?どなたか分かるかたご教授いただきたいです。
追記
axiosでpostをしている際の送信先URLをデベロッパーツールで確認していたところ、ホスト名の後のURLが重複していて、...
0
票
1
回答
191
閲覧数
await axiosが終了しない
説明
dbに情報を登録するapiapi/productを実装し
await axios.post('api/product', ...)
という形でapiを呼び出したのですが、いつまで経ってもaxios.postが終了せず
console.log(res.status)
が呼び出されません。
このようなことが起こる理由が理解できません。
なお、dbへのデータの登録は正常に完了しています。
...
0
票
1
回答
202
閲覧数
axiosを使って非同期でDBの値をクリックするたびに反転させたい
Laravelとvueを使ってTODOアプリを作っているのですが、アイコンをクリックした時にDBのdoneというカラムの真偽値を反転させたいのですがどのように実装すればいいのかさっぱりです。(axiosを使って非同期でDBの値をクリックするたびに反転させたい)、またはDBにdoneカラムに真偽値を持たせないでも、doneの真偽値だけvue側で持たせてクリックでイベント発火させる方法でもいいです。
...
0
票
0
回答
407
閲覧数
axiosとvue.jsを使用してWeb APIから結果を取得しようとすると 'SEC7120: [CORS]' エラーが表示される
オープンソースで公開されている、日本のコロナウイルス感染者数のAPIデータからaxiosを使用して情報を取得し、下記のようにブラウザ上に表示したいと思い、Vue.jsを使用してコードを作成しました。
実現したいこと
Prefecture: 北海道 CaseOfInfection: OO人 CaseOfInDeath: OO人
・・・・・以下、他の都道府県も続く形
しかし、...
0
票
1
回答
389
閲覧数
vue.js +axiosでデータベースの値を$dataに格納したい
Djangoでwebアプリを作成しており、template内でVue.jsを使用しています。
axiosを使ってデータベースにアクセスしており、データの受け渡し自体は上手くいっているようなのですが、.then()の中からthis.$dataにアクセスしようとすると何故かundifinedになってしまいます。
myscript.js
new Vue({
el: '#article',
...
0
票
1
回答
1,314
閲覧数
Docker RailsのCORS設定について
フロントエンド(Nuxt)からaxiosでAPI(Rails)にアクセスする際、CORSエラーになってしまい、RailsのCORSをどのように設定すれば良いか悩んでいます。
下記のソースコードの通り、いくつか試してみたのですが、同様のCORSエラーでした。
こういった場合はやはり、コンテナのIPを固定すべきでしょうか?
ご教授いただけると助かります。
ブラウザ エラー
Access to ...
0
票
1
回答
87
閲覧数
javascriptの時間表示を変えたい
現在reactでコードを書いています。
axiosでもらってきたjson形式のデータを表示させています。
ここの画像で2020-03-18までを表示させたいのですがjsonの情報自体に時間も含まれているのでどう表示させたらいいかわかりません。javascriptのgetmonthなど試してみたのですが上手く表示されなかったため、どなたか教えていただけますでしょうか。
<TableCell &...
0
票
1
回答
239
閲覧数
特定のルートのみReact(JavaScript)からLumen(PHP)へAjaxをした際にCORSで弾かれる。
概要
現在下記の様な構成のアプリケーションを開発しています。
フロントエンドにReact.js、バックエンドにAPIサーバーのLumen、その間にリバースプロキシとしてNginxを置いています。
そこで、ReactからPromiseベースのAjaxライブラリであるaxiosを使ったところCORSで弾かれました。
Lumen側でCORSの設定をし、一応は回避することはできたのですが、...
-1
票
1
回答
541
閲覧数
nuxt js で他のフレームワークを使わず、phpmailer でメール送信したい、静的サイトを出力もしたい
dbを使わず静的サイトを構築をしています。
お問い合わせフォームを作りたいのですが、本番環境はftpサーバなので、node mailerは使えません。
そこでphpmailerを使うことにして、nuxtjs のaxiosでやり取りをしようとしたのですが、
npm run devの環境では何とかエラーなしでrequestを送れているものの、responseがhtmlコードが戻ってきてしまいます。
...
0
票
1
回答
848
閲覧数
Flaskにaxiosでjsonのlistを送る方法
サーバサイドにFlask、フロントエンドにvue.jsを利用しています。
axiosを使って、データをサーバサイドに送りたいのですが、jsonをリスト型で送るのがうまくいっていません。ご教授頂けますでしょうか。
バージョン
Python 3.8
Vue 2.6.10
vue.js
axios.get('/testApi', {params:
{
jsonList: ...
0
票
1
回答
224
閲覧数
vue-cli + vuetifyのQiita検索アプリをvuex化したい
やりたいこと
cdnを用いたvue.jsのチュートリアルでやったQiitaAPIを使った検索アプリを色々なものに直したみたいとある日思いました。現状vue-cliとvuetify化は出来て、今はvuex化してみたいと考えていますが、現状挙動しない状態です。
vue-cliとvuetify化したソースコード
このサイトのリンク
特定のキーワードを入力すると、Qiitaの記事URL一覧が出ます。
...
0
票
1
回答
1,194
閲覧数
vue.js+axiosで、データの取得先のURLを動的に切り替えたい
axiosで外部からjsonを取ってきてv-forのループで表示させる、というよくあるサンプルにあるようなことなのですが、axiosでgetする際のURLをある程度変化させるようなことは可能なのでしょうか。
以下のようなHTML(PHP)と
(/hoge.php?id=5)
<div id="hogeapp">
<div v-for="program in ...
0
票
1
回答
134
閲覧数
サーバーで稼働させているファイル生成アプリのファイル生成先がローカルPCになる
お世話になります。
サーバーとローカルPCのネットワークの関係についてご教示いただけないでしょうか?
現在、nuxt.jsとfirebaseを使って
とある書類の印刷アプリを開発しています。
nuxt.jsのservermiddlewareを使い本体アプリからpdfを生成するためのapiを生やしています。
フォームに入力した内容をaxiosで/api/pdfへとpostし
...
1
票
0
回答
72
閲覧数
vue-cliでaxiosを使う
vue-cliでaxiosを使いapiで値を取得したいのですが、vueファイルひとつに全てを書きたいです。
axios.get('api-url').then(response => ( 変数A = response))
(catchは省略してます)
変数Aを同ファイルの
<template><div>{変数A}</div></template&...
1
票
1
回答
304
閲覧数
Vue.jsでaxiosを使い.envファイルにアクセストークンを置いてもブラウザのdevtoolからトークンがばれる
Vue.jsでhttp通信を行うために
axiosを使い、使用するアクセストークンは.envファイルに置いているのですが
ブラウザのdevtoolからトークンがばれるのはどうしようもないのでしょうか?
暗号化などを行う方法がありますか?
0
票
1
回答
1万
閲覧数
axiosのpostでstatus:500が返ってきたときにcatchに入らない
vue.jsを使用し、axiosでpostした際に、status:500が返ってきてもcatchに入ってくれません。
await this.axios
.post('/user', data)
.then(response => {
console.info(response.data)
this.result = response.data
...
0
票
1
回答
692
閲覧数
Nuxt.jsとSpringBootによるSPA・RestApiの設計について
現在、Nuxt.jsとSpringBootによるSPA・RestApiのWebアプリケーションの開発を考えております。
ローカルでの開発では
・フロントエンドをdevサーバ(3000)で起動
・バックエンドをSpringBoot(8080)で起動
として、別々のサーバで動かせばうまくいくとは思いますが、
本番での運用方法がいまいちわかっていません。
...
0
票
0
回答
2,974
閲覧数
Vue.jsのmethods内にて複数のawaitを実行すると、一つ目のawaitを実行した時点で処理が終わってしまう。
発生している問題
クリックイベントで発火してAPIを二つ順番に投げる処理を書きたいのですが、以下のように実装したところ、一つ目のAPIを実行した時点で処理が終わってしまい、二つ目の API が実行されません。
async/await を利用し、順次 axios で API が実行されると期待したのですが、下記の処理では firstAPI が実行された後の処理が動きませんでした。
...
0
票
1
回答
2,601
閲覧数
IE11でarrow関数の変換ができない @babel/plugin-transform-arrow-functions が機能しない
ReactでIE11向けサイトを作成しているのですが、
Chromeでは使用できるarrow関数がIE11では構文エラーとなってしまいます。
@babel/plugin-transform-arrow-functions はarrow関数をfunctionに変換してくれるプラグインだという認識ですが正しいでしょうか。
buildした際にarrow関数が残ってしまいます。
設定は下記になります。
...
0
票
1
回答
1,686
閲覧数
Storybook for Vueで「Failed to mount component: template or render function not defined.」になる
Vue.jsを使用したプロジェクトにStorybook for Vueを入れようとしたところ、ブラウザに表示するところまではできるのですが、コンポーネントが下記のエラーになってしまいます。
Failed to mount component: template or render function not defined.
当初は自分でインストールしていたのですが、どうにも解決できず @...
0
票
0
回答
130
閲覧数
Firefoxにおける大量のPostリクエスト処理で出るエラーについて On errors occurred in large amount of Post request processing in Firefox
現在Vue.jsを使用してアプリケーションを作成しております。
その中でaxiosを使用しAPIでクライアント側から画像をアップロードしてサーバー側にて画像に加工を行いその加工した画像をレスポンスで受けるという仕組みを作成致しました。
...
0
票
1
回答
3,548
閲覧数
axiosでHerokuに存在しているAPIサーバーからJSONをgetできない
聞きたいこと
axiosを使用してHerokuに存在しているAPIサーバーからJSONをGetしたいと思っているのですが、
以下のようなエラーが発生してしまいできません。。。
APIサーバー側・クライアント側に問題があるのかの切り分けもできていない状態です…
- エラー内容
No 'Access-Control-Allow-Origin' header is present on the ...
0
票
1
回答
348
閲覧数
SyntaxError: Unexpected token
SyntaxError: Unexpected tokenとエラーが出ます。
import React, { Component } from 'react';
import axios from 'axios';
import SearchForm from './SearchForm';
import GeocodeResult from './GeocodeResult';
import ...
1
票
0
回答
941
閲覧数
vuetifyのselectboxの値によってフォームの表示,非表示を切り替えたい
概要
vue + vuex + vuetify を用いて動的なフォームを作成したいのですが,
selectboxで選ばれた結果によって動的にフォームの表示,非表示を切り替えたいです.
環境
vue 2.5.2
vuex 3.0.1
vuetify 0.17.2
現状
App.vue
<template>
<v-app>
<v-form>
&...