デプロイ後にAPI通信ができなくなりました
解決したいこと
vercelからherokuの自作APIを叩きたい
Webアプリを作成し、クライアント側をvercel、サーバー側をherokuへ
デプロイしましたが、API通信ができなくなってしまいました。
解決方法を教えて下さい。
発生している問題・エラー
ローカル開発環境でできていたAPI通信がデプロイ後にできなくなってしまった
該当するソースコード
クライアントはReact、サーバーはNodejsを使用
クライアント側
Products.jsx
const handleDataFetch = async (page) => {
try {
const response = await axios.get(`/${page}/all`); //pageには文字列を代入
dispatch(setItems(response.data));
} catch(err) {
console.log(err);
}
};
package.json
{
{...},
"proxy": "https://<appName>.herokuapp.com/api"
}
サーバー側
server.js
const express = require("express");
const app = express();
const port = process.env.PORT || 4001;
require('dotenv').config();
const cors = require('cors');
//////CONNECT DB//////
const mongoose = require("mongoose");
mongoose
.connect(process.env.MONGO_URL)
.then(() => console.log("connect MongoDB"))
.catch(() => console.log("disconnected MongoDB"));
//////MIDDLE WARE//////
app.use(cors());
app.use(express.json());
const productRouter = require("./routes/product");
const itemRouter = require("./routes/item");
app.use("/api/products", productRouter);
app.use("/api/items", itemRouter);
//////Listen PORT//////
app.listen(port, () => console.log(`App listening on port ${port}`));
自分で試したこと
サーバー側をherokuへデプロイ後、localhost:3000からAPIを叩き正常に動作することを確認
CORS設定が不十分である可能性を考慮し、vercel.jsonを作成。
以下のコードを追加し再デプロイ *現在は削除済み
{
"routes": [
{
"src": "/api/*",
"methods": ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
"headers": {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type"
}
}
]
}
0 likes
