YahooAPIをVercel上で呼び出したい
解決したいこと
デプロイしたNuxtのWebアプリケーションから、YahooAPIの商品情報を取得したい
発生している問題・エラー
Yahooの商品検索のAPIからデータを取得したいのですが、ローカルだとうまくいきますが
デプロイしたものだとうまくいきません。
API→https://developer.yahoo.co.jp/webapi/shopping/v3/itemsearch.html
該当するソースコード・試したこと
案① Nuxtのプロキシ経由で呼び出す
結果：ローカルはOK,本番はNG（CORSエラー）
index.ts
try {
// 通信先のHTTP以降を指定する
const response = await $axios.get("/ShoppingWebService/V3/itemSearch", {
//パラメータリクエスト
params: {
appid: config.public.YAHOO_API_APPID,
query: this.searchKeyword,
image_size: 300,
genre_category_id: sortGenre,
price_from: this.minPrice,
price_to: this.maxPrice,
results: resultsNum,
start: this.start,
sort: sortOptions,
},
});
const payload = response.data;
axios.ts
import axios from "axios";
export default defineNuxtPlugin((nuxtApp) => {
const config = useRuntimeConfig();
const instance = axios.create({
baseURL: "/api/", // 無条件で "/api/" にする
});
nuxtApp.provide("axios", instance);
});
nuxt config
server: {
proxy: {
"/api/": {
target: "https://shopping.yahooapis.jp",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
},
案② server>apiにサーバーレス関数をつくる
結果：ローカル・本番ともにNG
index.ts
try {
const response = await $axios.get("/api/yahoo", {
params: {
query: this.searchKeyword,
results: 20,
start: 1,
appid: config.public.YAHOO_API_APPID, // 環境変数から取得
},
});
const payload = response.data;
yahoo.ts (server>api配下にあります）
import type { VercelRequest, VercelResponse } from "@vercel/node";
import axios from "axios";
export default async function handler(req: VercelRequest, res: VercelResponse) {
console.log("Request received:", req.method, req.url); // Log the request method and URL
const {
query,
genre_category_id,
price_from,
price_to,
results,
start,
sort,
} = req.query;
const YAHOO_API_URL =
"https://shopping.yahooapis.jp/ShoppingWebService/V3/itemSearch";
const YAHOO_API_APPID = process.env.YAHOO_API_APPID;
if (!YAHOO_API_APPID) {
return res
.status(500)
.json({ error: "Yahoo API App ID is not set in environment variables." });
}
try {
const params = {
appid: YAHOO_API_APPID,
query,
genre_category_id,
price_from,
price_to,
results,
start,
sort,
image_size: 300,
};
const response = await axios.get(YAHOO_API_URL, { params });
res.status(200).json(response.data);
} catch (error: any) {
res.status(error.response?.status || 500).json({ error: error.message });
}
}
envには正しいアプリケーションID（Yahooで発行したもの）が入っていることを確認しています。
変数名も正しいです。
リクエストURLはともに同じにもかからず、下記エラーで返ってきます。
リクエスト URL:
https://nuxt-sales-app-git-main-mknkgwr1005s-projects.vercel.app/api/ShoppingWebService/V3/itemSearch?appid=my-app-id&query=%E7%99%BD%E5%B7%9E&image_size=300&results=20&start=1
リクエスト メソッド:
GET
ステータス コード:
404 Not Found
リモート アドレス:
64.29.17.129:443
参照ポリシー:
strict-origin-when-cross-origin
{
"message": "Request failed with status code 404",
"name": "AxiosError",
"stack": "AxiosError: Request failed with status code 404\n at uE (https://nuxt-sales-app-git-main-mknkgwr1005s-projects.vercel.app/_nuxt/A13jnFRI.js:32:1033)\n at XMLHttpRequest.f (https://nuxt-sales-app-git-main-mknkgwr1005s-projects.vercel.app/_nuxt/A13jnFRI.js:32:5880)\n at Zr.request (https://nuxt-sales-app-git-main-mknkgwr1005s-projects.vercel.app/_nuxt/A13jnFRI.js:34:1961)\n at async Proxy.findCategoryDetail (https://nuxt-sales-app-git-main-mknkgwr1005s-projects.vercel.app/_nuxt/A13jnFRI.js:3216:2548)",
"config": {
"transitional": {
"silentJSONParsing": true,
"forcedJSONParsing": true,
"clarifyTimeoutError": false
},
"adapter": [
"xhr",
"http",
"fetch"
],
"transformRequest": [
null
],
"transformResponse": [
null
],
"timeout": 0,
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
"maxContentLength": -1,
"maxBodyLength": -1,
"env": {},
"headers": {
"Accept": "application/json, text/plain, */*"
},
"baseURL": "/api/",
"params": {
"appid": "my-app-id",
"category_id": 13457,
"output": "json"
},
"method": "get",
"url": "/ShoppingWebService/V1/categorySearch"
},
"code": "ERR_BAD_REQUEST",
"status": 404
}
わかる方いらっしゃいましたご教示いただけますと幸いです。
0 likes
