Выпуск WebPack CORS

Question

Я использую WebPack в своем приложении React, а для Post / put я использую fetch. У нас есть внутренний dev-сервер, на котором мне нужно совершать звонки.

Я получаю сообщение об ошибке CORS независимо от того, что я делаю.

Мой URL-адрес на стороне клиента выглядит примерно так в локальной сети:

https://localhost:8080/webpack-dev-server/

И серверная сторона сейчас находится на внутреннем сервере разработчика, примерно так:

http://10.30.15.13:3400/clientapi/clientapi/sendInfo/

IЯ включил приведенный ниже код в мой webpack.cofig

headers: {
            "Access-Control-Allow-Origin": "*",
            // "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
            // "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
            // "Access-Control-Allow-Origin": "http://10.30.15.17:9400/ondemand/ondemand/provisionQueue/",
            "Access-Control-Allow-Methods": "GET, POST, PUT, OPTIONS",
            "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
        },

Я также попытался включить прокси-сервер многими способами, предложенными во многих ответах Stackoverflow. Некоторые примеры того, что я уже пробовал:

proxy: {
            '/api': {
                target: {
                    host: "0.0.0.0",
                    protocol: 'http:',
                    port: 8080
                },
                pathRewrite: {
                    '^/api': ''
                }
            }
        }

Также попытался включить прокси-сервер, предложенный, как предложено в ссылке ниже:

https://sdk.gooddata.com/gooddata-ui/docs/4.1.1/ht_configure_webpack_proxy.html

Я также попытался включить Chromeрасширение Moesif CORS, предложенное в разных ответах несколькими пользователями StackOverflow. Но это также не помогло.

Я также попытался добавить разрешенный хост в webpack-dev-server:

allowedHosts: [
        'http://10.30.15.17:9400/clientapi/clientapi
]

js файл для вызова выборки:

export function submitInfo( data) {
    console.log("data: ", data);
    console.log("API_URL: ", API_URL)
    return dispatch => {
        dispatch(makeAPIRequestToSendEmail());
        // return fetch(API_URL + url, {
        return fetch(API_URL, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                // "Access-Control-Allow-Origin": "*",
                // "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
                // "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
            },
            body: JSON.stringify({ data })
            // body: data
        })
            .then(response => {
                console.log("response: ", response);
                response.json()
            })
            .catch(err => dispatch(errorEmail(err)));
    }
}

webpack.config:

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

module.exports = {

entry: path.resolve(__dirname, 'src/index.js') ,
output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',

/ * publicPath: '/dist/bundle.js', publicPath: '/'* /},

plugins: [
    new HtmlWebpackPlugin({
        template: __dirname + '/public/index.html',
        filename: 'index.html',
        inject: 'body'
    }),
    // Generates default index.html
    // new HtmlWebpackPlugin({  // Also generate a test.html
    //     filename: 'test.html',
    //     template: 'src/assets/test.html'
    // })
],

devServer: {
    // contentBase: "./public",
    contentBase: path.resolve(__dirname, '/dist'),
    historyApiFallback: true,
    hot: true,
    port: 8888,
    // allowedHosts: [
    //     'http://10.30.15.17:9400/clientapi/clientapi/provisionQueue/',
    // ],
    headers: {
        "Access-Control-Allow-Origin": "*",
        // "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        // "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
        // "Access-Control-Allow-Origin": "http://10.30.15.17:9400/ondemand/ondemand/provisionQueue/",
        "Access-Control-Allow-Methods": "GET, POST, PUT, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    },
    proxy: {
        '/api': {
            target: {
                host: "0.0.0.0",
                protocol: 'http:',
                port: 8080
            },
            pathRewrite: {
                '^/api': ''
            }
        }
    }
},

module: {
    rules: [
        {
            test: /.js$/,
            loader: 'babel-loader',
            query: {
                presets: ['@babel/react', '@babel/env'],
                plugins: ['@babel/proposal-class-properties']
            }
        },
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        },
        {
            test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts/',    // where the fonts will go
                    publicPath: '../'       // override the default path
                }
            }]
        },
    ]
}
};

Package.json:

{
  "name": "sendinfo-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2",
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "@fortawesome/react-fontawesome": "^0.1.6",
    "aphrodite": "^2.4.0",
    "babel-core": "7.0.0-bridge.0",
    "bootstrap": "^4.3.1",
    "final-form": "^4.18.5",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.0",
    "react": "^16.10.2",
    "react-bootstrap": "^1.0.0-beta.14",
    "react-dom": "^16.10.2",
    "react-final-form": "^6.3.0",
    "react-promise": "^3.0.2",
    "react-redux": "^7.1.1",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "react-spinners": "^0.6.1",
    "react-thunk": "^1.0.0",
    "reactstrap": "^8.1.0",
    "redux": "^4.0.4",
    "redux-promise": "^0.6.0",
    "redux-saga": "^1.1.1",
    "redux-thunk": "^2.3.0",
    "uikit-react": "^3.0.20"
  },
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot --inline=false",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.6.4",
    "@babel/core": "^7.6.4",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3",
    "babel-jest": "^24.9.0",
    "babel-loader": "^7.1.5",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.12.0",
    "redux-devtools": "^3.5.0",
    "regenerator-runtime": "^0.13.3",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "to-string-loader": "^1.1.5",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.2"
  }
}

Chrome Console упоминается ниже:

Смешанное содержимое: страница в' https://localhost:8080/webpack-dev-server/' был загружен через HTTPS, но запросил небезопасный ресурс 'http://10.30.15.13:3400/clientapi/clientapi/sendInfo/'. Этот запрос был заблокирован;содержимое должно быть передано по HTTPS.

TypeError: Не удалось получить

Не уверен, что еще я могу сделать, чтобы это исправить. Любое предложение приветствуется.