Webpack-dev-server cross-domain invalid

problem description

use webpack-dev-server to request cross-domain request backend
Local: http://localhost:7777/login/login.html
backend: http://localhost:8080/v1/user/login

related codes

/ / Please paste the code text below (do not replace the code with pictures)

webpack.config.js

var webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const copyWebpackPlugin = require("copy-webpack-plugin");
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        login: __dirname + "/js/login.js",
        clause: __dirname + "/js/clause.js",
        privacy: __dirname + "/js/privacy.js",
    },
    output: {
        path: __dirname + "../../../webapp/login",
        filename: "js/[name].js"
    },
    devServer: {
        contentBase: __dirname + "../../../webapp",
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true,
        port: 7777,
        host: "localhost",
        proxy: {
            "/api": {
                target: "http:/localhost:8080/",
                changeOrigin: true,
                secure: false,
                pathRewrite: {
                    "^/api": ""
                }
            }
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: {
                        loader: "style-loader",
                    },
                    use: [
                        {
                            loader: "css-loader",
                            options: {
                                minimize: true
                            }
                        }
                    ],
                    publicPath : "../",
                })
            },
            {
                test:/\.(png|gif|jpg|svg)$/i,
                loader:"url-loader",
                query: {
                    limit:2000,
                    name:"image/[name].[ext]"
                }
            },
            {
                test:/\.html$/,
                loader:"html-loader",
                options: {

                }
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(["webapp/login"]),
        new HtmlWebpackPlugin({
            filename:"login.html",
            template:"login.html",
            inject:"body",
            chunks:["login"]
        }),
        new HtmlWebpackPlugin({
            filename:"clause.html",
            template:"clause.html",
            inject:"body",
            chunks:["clause"]
        }),
        new HtmlWebpackPlugin({
            filename:"privacy.html",
            template:"privacy.html",
            inject:"body",
            chunks:["privacy"]
        }),
        new copyWebpackPlugin([{
            from: "../lib",
            to:"../lib"
        }]),
        new ExtractTextWebpackPlugin({
            filename: "./css/login.css"
        }),
        new webpack.DefinePlugin({
            "API_HOST": ""http://localhost:8080/""
        })
    ],
};

login.js

loginHandler () {
            this.loginUserName = $("-sharploginUserName").val();
            this.loginUserPassword = $("-sharploginUserPassword").val();
            $.ajax({
              url:API_HOST + "/v1/user/login",
                data:"username=" + this.loginUserName + "&password="+ this.loginUserPassword,
                type:"get",
                dataType:"json",
                success:function(data){
                    console.log(data);
                },
                failure:function(error){
                    console.log(error);
                },
            });
        },

what result do you expect? What is the error message actually seen?

enter incorrect password:
backend result:

clipboard.png

:

clipboard.png

clipboard.png

is there still a cross-domain problem?
or is there a misconfiguration in my place?
ask the great gods for advice ~


target means to replace what you requested. What you write here means that the path api in all requests is replaced by your http://localhost:8080/, and your APIhost should be'/ api'

.
  1. your http:/localhost : 8080 / change to http://localhost:8080/
  2. API_HOST:'/ api'

target: 'http:/localhost:8080/' // http://localhost:8080
// ...
'API_HOST': '"http://localhost:8080"' // /

'API_HOST': '"http://localhost:7777/"'

API_HOST should be the address of your proxy server, not the address of the target server

Menu