webpack-dev-server跨域无效

Question

问题描述

使用webpack-dev-server跨域请求后台
本地：http://localhost:7777/login/login.html
后端：http://localhost:8080/v1/user/login

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

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 = $("#loginUserName").val();
            this.loginUserPassword = $("#loginUserPassword").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);
                },
            });
        },

你期待的结果是什么？实际看到的错误信息又是什么？

输入错误密码：
后端结果：

前端结果：

这是还存在跨域问题吗？
还是我那个地方配置错误呀？
请大神们指教一下~

Answer 1

target是目标的意思，替换你请求的，你这里写的意思是，所有的请求中的路径api替换为你http://localhost:8080/，你的APIhost应该是'/api'

1. 你的 http:/localhost:8080/ 改成 http://localhost:8080/
2. API_HOST: '/api'

Answer 2

target: 'http:/localhost:8080/' // 应该是http://localhost:8080
// ...
'API_HOST': '"http://localhost:8080"' // 去掉最后的/试试

Answer 3

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

API_HOST应该是你的代理服务器的地址，而不是目标服务器的地址