前提・実現したいこと
Jリーグやプロ野球などのその日の試合日時を取得したいのですが、無料で提供しているものを見つけられず、YahooAPI自然言語処理APIで解決しようと考えました。
しかし、色々試してはみたのですが上手くデータを取得できません。
APIの叩き方が間違っているのですが、どうしたら良いのかさっぱり分かりません。
Reactで開発しているのですが、Webアプリ開発初心者のためご助言いただけると嬉しいです。
該当のソースコード
const ROOT_URL = 'https://jlp.yahooapis.jp/NLUService/V1/analyze' const MYID = '' const QUERYSTRING = '今日の試合' const data ={ methods :'SPORTS', param_method_subcat :'GAMES' } export const readEvents =() => async dispatch => { const response = await axios.get(`${ROOT_URL}${MYID}${QUERYSTRING}${data}`) console.log(response) dispatch({type:READ_EVENTS, response}) }
data の渡し方はこんな感じじゃないかなと思いますが、
const response = axios.get(ROOT_URL, data);
あとブラウザの console にエラーメッセージとか出てるなら載せたほうが良いかと。
データの渡し方ありがとうございます。
そして渡し方ばかり気にしていて、肝心のエラーを見ていませんでした・・・
'''
Access to XMLHttpRequest at 'https://jlp.yahooapis.jp/NLUService/V1/analyze' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Uncaught (in promise) Error: Network Error
at createError (createError.js:17)
at XMLHttpRequest.handleError (xhr.js:80)
'''
というエラーでしたので、どうやらAccess-Control-Allow-Originヘッダがないことが原因のようなので、以下のようにヘッダ情報を追加してみたのですがエラー内容は変わりませんでした。
'''
const ROOT_URL = 'https://jlp.yahooapis.jp/NLUService/V1/analyze'
const MYID = ''
const QUERYSTRING = '今日の試合'
const data ={
methods :'SPORTS',
param_method_subcat :'GAMES'
}
const headers ={
'Access-Control-Allow-Origin': 'origin'
}
export const readEvents =() => async dispatch => {
const response = await axios.get(ROOT_URL,MYID,QUERYSTRING,data,headers)
console.log(response)
dispatch({type:READ_EVENTS, response})
}
'''
いまのところ問題点は「Yahoo APIを使おうとすると CORS エラーが出る」ですよね。
私は その内容の回答に自信がないので、
上のコメントの感じで質問文を書き直してみるのが良いかと思います。
タイトルにエラーメッセージ載せとくと、分かる人に見つけてもらいやすくなるかも?
ちなみに、API のドキュメント(下記URL)を見るに、data として渡すのは
- appid: 'XXXXX'
- intext: '今日の試合'
の 2 つではないかと思います。
(質問文で書いてあるURLは、レスポンス(Yahooが返すデータ)のように思われる)
https://developer.yahoo.co.jp/webapi/jlp/nlu/v1/
回答1件
あなたの回答
tips
プレビュー