webpack-dev-server跨域无效

问题描述

使用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);
                },
            });
        },

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

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

clipboard.png

前端结果:

clipboard.png

clipboard.png

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

阅读 3.9k
3 个回答

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

  1. 你的 http:/localhost:8080/ 改成 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应该是你的代理服务器的地址,而不是目标服务器的地址

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题