数据。在开发(构建)中工作正常"/>
无法在 React 生产(构建)中获取 api 数据。在开发(构建)中工作正常
在构建我的 React 应用程序时,我正在努力从我的 API 中获取数据。它在本地运行良好,所有路由都运行良好。但是当我尝试构建时,我无法获取数据。
我得到的错误是 net::ERR_BLOCKED_BY_CLIENT 看起来像 cors,我试图改变但没有成功。
在 mongo 中,我允许所有 IP 访问我的数据库。
这是我的服务器应用程序
App.ts
const app = express();
const corsOptions = {
origin: 'http://localhost:3000' || 'http://192.168.0.212:3000/',
credentials: true, // access-control-allow-credentials:true
optionSuccessStatus: 200
};
config();
const uri = `mongodb+srv:...`;
app.use(cors(corsOptions));
app.use(bodyParser.json());
app.use(multer({ storage: fileStorage, fileFilter: fileFilter }).single('image'));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/images', express.static(path.join(__dirname, 'images')));
app.use('/users', userRoutes);
app.use('/posts', postRoutes);
app.use('/about', aboutUsRoutes);
try {
mongoose.connect(uri, {
useNewUrlParser: true,
useUnifiedTopology: true,
useCreateIndex: true
});
app.listen(process.env.port || 5000, () => {
console.log(`Listening on Port 5000 or ${process.env.port}`);
});
} catch (err) {
console.log('Couldnt connect to the DB');
}
在我的前端(这是一个不同的应用程序)我正在使用 axios。代码是:
api.ts
我试图将 CORS 指向我的构建地址,但没有成功。这很有趣,因为开发构建工作正常。我的后端 api 的所有链接也都可以正常工作。
import axios from "axios";
const instance = axios.create({
// baseURL: "http://192.168.0.241:5000/"
baseURL: "http://localhost:5000/"
// baseURL: "/"
});
export default instance;
关于我的 redux 动作
index.ts
我有:
export const fetchPosts = (page: number) => async (dispatch: ({ type, payload }: FETCH_POSTS_TYPE) => void) => {
try{
const limit = 5;
const response = await api.get(`/posts?page=${page}&limit=${limit}`);
dispatch({ type: FETCH_POSTS, payload: response.data.posts });
} catch (err) {
dispatch({ type: FAILED_FETCH, payload: true });
console.log("ERROR: Couldn't establish connection with database" + err);
}
};
回答如下:
更多推荐
无法在 React 生产(构建)中获取 api 数据。在开发(构建)中工作正常
发布评论