сервер разработки webpack не позволяет запросить POST - приложение реагирует - PullRequest
Новая
       9

сервер разработки webpack не позволяет запросить POST - приложение реагирует

0 голосов
/ 01 мая 2018

Я занимаюсь разработкой своего первого приложения, реагирующего на webapack, с использованием webpack-dev-server, однако у меня возникают проблемы с отправкой POST-запросов в мой API-интерфейс флешки, так как я получаю ошибку 400 неверных запросов. Вот мой запрос на сообщение: 

  fetch('/api/login', {
   method: 'post',
   headers: {'Content-Type':'application/json'},
   body: JSON.stringify({"first_name": "name"})
  });

Если я настрою вышеупомянутое в запросе GET (и удалю тело), ​​запрос пройдет нормально, и API-интерфейс вернет данные.

Копаем немного глубже, кажется, что webpack-dev-server не разрешает POST-запросы - правильно ли я это понял и есть ли обходной путь?

Вот моя конфигурация webpack: 

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    host:'0.0.0.0',
    hot: true,
    historyApiFallback: true,
    proxy: {
      '/api': {
        target: 'http://flaskapp:5090',
        pathRewrite: {'^/api': ''},
        secure: false,
      }
    },
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
});

1 Ответ

0 голосов
/ 01 мая 2018

Это ни в коем случае не принятый ответ. Я просто делюсь своим файлом Webpack с тем, как я заставил его работать.

Вот мой файл webpack.config. У меня была та же проблема на днях с отправкой запросов POST. Тем не менее, я посмотрел в Интернете, чтобы посмотреть, смогу ли я удалить /api из своих запросов на выборку, поэтому я попробовал модуль перезаписи, и он не работал для меня, поэтому я просто удалил его. В моих запросах на выборку, если я хочу получить что-то, например, это будет / api / signup, например, и моя выборка сработала. Я также настроил свой прокси в webpack, а не в package.json 

const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const HtmlWebPackPlugin = require('html-webpack-plugin');

var browserConfig = {
    devServer: {
        historyApiFallback: true,
        proxy: {
            "/api": "http://localhost:3012"
        }
    },
    entry: ['babel-polyfill', __dirname + '/src/index.js'],
    output: {
        path: path.resolve(__dirname + '/public'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ['react', 'env', 'stage-0']
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './public/index.html',
        })
    ]
}

var serverConfig = {
    target: 'node',
    externals: [nodeExternals()],
    entry: __dirname + '/server/main.js',
    output: {
        path: path.resolve(__dirname + '/public'),
        filename: 'server.js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    query: {
                        presets: ['react', 'env', 'stage-0']
                    }
                }
            }
        ]
    }
}

module.exports = [browserConfig, serverConfig]
...