適用於reactjs的Webpack和axios在生產環境中可用，但在開發模式中不可用

Question

我用react和redux構建一個應用程序，我的后端是django。

當我運行npm run build並運行django服務器時，我看到我的crud應用程序運行良好！ 沒有任何問題。

但是，當我運行npm start它像往常一樣在瀏覽器中打開新鏈接，並且一切正常，除了帶有axios http請求axios它引發以下錯誤：

但在生產模式下，它是工作。

這是我的webpack.common.js文件

const path = require('path');
const CleanWebpackPlugin  = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: './client/index.js'
  },
  plugins: [
    // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./client/index.html",

    })
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
      rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          }
      ]
  }
};

這是我的webpack.dev.js文件

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

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  }
});

這是我的webpapck.prod.js文件

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

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map'
});

這是我的package.js文件

{
  "name": "react-redux-django-crud",
  "version": "1.0.0",
  "description": "",
  "main": "client/index.js",
  "scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js",
    "watch": "./node_modules/.bin/webpack --config webpack.prod.js --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.28.4",
    "csv-loader": "^2.1.1",
    "express": "^4.15.3",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.18.2",
    "webpack": "^4.39.0",
    "webpack-cli": "^3.3.7",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.0",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.0.1",
    "redux": "^4.0.4"
  }
}

我希望你能解決我的問題。

在哪里使用axios進行示例http請求

這是我的table.js文件：

import React, {Fragment} from "react";
import { connect } from "react-redux";
const axios = require('axios');

class Table extends React.Component {
    onEdit = (item) => {  //Use arrow function to bind `this`
        this.props.selectedData(item);
    }

    onDelete = (id) => {
        const data = {
            id,
        }
        axios.delete('http://127.0.0.1:8000/api/v1/employee/' + data.id + '/')
         .then((response) => { //Use arrow function to auto bind `this`
           // handle success
           this.props.dispatch({ type: 'DELETE_POST', data })
         });


    }


    componentDidMount(){
        axios.get('http://127.0.0.1:8000/api/v1/employee/')
         .then((response) => { //Use arrow function to auto bind `this`
           // handle success
           this.props.dispatch({ type: 'GET', response })   //considering response.data is the correct array 
         });
     }
    render() {
        return (
            <Fragment>
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Age</th>
                        <th scope="col">Edit</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                {this.props.employees.map((item, index) => (
                    <tr key={index}>
                        <td>{item.name}</td>
                        <td>{item.age}</td>
                        <td>
                            <button
                                type="button"
                                onClick={() => this.onEdit(item)}>EDIT
                            </button>
                            <button
                                onClick={ () => this.onDelete(item.id) }>DELETE
                            </button>
                        </td>
                    </tr>
                ))}
                </tbody>
            </Fragment>
        );
    }
}

const mapStateToProps = (state) => ({ employees: state.employees });

export default connect(mapStateToProps)(Table);

我的API是開放的，沒有身份驗證和條件。

這個反應和django應用在生產中工作正常，這只是開發模式的問題。 誰能幫我解決這個問題？ 為什么它不起作用？

謝謝

Answer 1

您需要在settings.py中添加cors設置。 這會將Access-Control-Allow-Origin：*添加到您的請求中。

pip install django-cors-headers

添加到已安裝的應用程序。

INSTALLED_APPS = (
    'corsheaders'
)

添加中間件。

MIDDLEWARE_CLASSES = (
    'corsheaders.middleware.CorsMiddleware',
)

CORS_ORIGIN_ALLOW_ALL = True