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:
:
is there still a cross-domain problem?
or is there a misconfiguration in my place?
ask the great gods for advice ~