问题描述
使用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);
},
});
},
你期待的结果是什么?实际看到的错误信息又是什么?
输入错误密码:
后端结果:
前端结果:
这是还存在跨域问题吗?
还是我那个地方配置错误呀?
请大神们指教一下~
target是目标的意思,替换你请求的,你这里写的意思是,所有的请求中的路径api替换为你http://localhost:8080/,你的APIhost应该是'/api'