React JS webpack-dev-server api cannot be called

Question

I've built my app in React and after testing it in the production build through the webpack-dev-server, the impossibility of calling the API shows up. I'm making the requests through AXIOS.

The following error occurs for GET request:

GET http://localhost:8080/api/web/api/get-logged-navbar 404 (Not Found)

For the POST requests, it doesn't trigger the actions.

Even though I'm using the correct path for the request.

My app's important folders are structured as such:

public (the bundle.js built file, as well as other styling and script assets are in here)
src (components and actions)
api (the api code is in here: Yii2)

Webpack config:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'public');
var APP_DIR = path.resolve(__dirname, 'src');

var config = {
  entry: APP_DIR,
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: APP_DIR,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        loaders: ["style-loader","css-loader"]
      },
    ]
  }
};

module.exports = config;

Do I need to set up a proxy and put the API on another server port?

Dustin Morris Dustin Morris · Accepted Answer · 2017-11-22T13:23:28

I built a weather app that used React/Webpack and Axios to make API calls to openweather.org I wouldn't think that a proxy would be necessary. You should investigate the URL you are passing to Axios. Without being able to see your code, it would be hard to make further suggestions.

React JS webpack-dev-server api cannot be called

2 Answers