各位师兄好啊。我在做一个用户名登录功能测试的时候,利用ajax以及webpack服务器post跨域请求express服务器的时候遇到点麻烦。我先输入username,然后onblur之后发送用户名至后台,后台res.send(req.body.username),然后ajax的success把data打印出来看。然而,却总是404,估计是跨域失败的问题? webpack代码如下:varpath=require('path');varwebpack=require('webpack');varExtractTextPlugin=require("extract-text-webpack-plugin");varCommonsChunkPlugin=require("webpack/lib/optimize/CommonsChunkPlugin");varproxy=require("http-proxy-middleware");module.exports={devtool:'eval-source-map',entry:{index:['webpack-dev-server/client?http://localhost:8181','webpack/hot/only-dev-server','./public/javascripts/entry.js'],vendor:['react','react-dom','react-router','jquery']},output:{//path:path.resolve(__dirname,'./build'),filename:'bundle.js',publicPath:'/'},devServer:{//这儿有问题?重定向失败的问题?//contentBase:"./",inline:true,historyApiFallback:true,port:8181,host:"127.0.0.1",proxy:[{context:"/*/*",//跨域的路由设置target:"http://localhost:3000",//跨到哪儿去^-^changeOrigin:true//允许跨域,必不可少}]},module:{loaders:[{test:/\.js?$/,exclude:/node_modules/,loader:'babel-loader',query:{presets:['es2015','stage-0','react'],plugins:[['import',{libraryName:'antd',style:'css'}]]}},{test:/\.css$/,loader:ExtractTextPlugin.extract({fallback:'style-loader',use:'css-loader'})},{test:/\.scss$/,loader:ExtractTextPlugin.extract({fallback:'style-loader',use:'css-loader!sass-loader'})},{test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'}]},plugins:[newwebpack.HotModuleReplacementPlugin(),newExtractTextPlugin('style.css'),newCommonsChunkPlugin({name:'vendor',filename:'vendor.js'})]}express服务端代码如下,主要是最下面一点的设置:varenvironment=process.env.NODE_ENV;varwebpack=require('webpack');varconfig;varexpress=require('express');varpath=require('path');varfavicon=require('serve-favicon');varlogger=require('morgan');varcookieParser=require('cookie-parser');varbodyParser=require('body-parser');varconsolidate=require('consolidate');varapp=express();if(environment==='production'){config=require('./webpack.config.prod.js');}elseif(environment==='development'){config=require('./webpack.config.dev.js');}else{console.log('PleasedefineNODE_ENVfirst');}varcompiler=webpack(config);if(environment==='production'){varWebpackDevMiddleware=require('webpack-dev-middleware');app.use(WebpackDevMiddleware(compiler,{noInfo:true,publicPath:config.output.publicPath}));}elseif(environment==='development'){varWebpackHotMiddleware=require('webpack-hot-middleware');app.use(WebpackHotMiddleware(compiler));}varindex=require('./routes/index');varusers=require('./routes/users');//viewenginesetup//app.engine('html',consolidate.ejs);app.set('viewengine','ejs');app.set('views',path.join(__dirname,'views'));//uncommentafterplacingyourfaviconin/public//app.use(favicon(path.join(__dirname,'public','favicon.ico')));app.use(logger('dev'));app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended:false}));app.use(cookieParser());app.use(express.static(path.join(__dirname,'views')));app.use('/',index);app.use('/users',users);//catch404andforwardtoerrorhandlerapp.use(function(req,res,next){varerr=newError('NotFound');err.status=404;next(err);});//errorhandlerapp.use(function(err,req,res,next){//setlocals,onlyprovidingerrorindevelopmentres.locals.message=err.message;res.locals.error=req.app.get('env')==='development'?err:{};//rendertheerrorpageres.status(err.status||500);res.render('error');});//跨域请求设置app.all('*',function(req,res,next){res.header('Access-Control-Allow-Origin','*');res.header('Access-Control-Allow-Methods','PUT,GET,POST,DELETE,OPTIONS');res.header('Access-Control-Allow-Headers','X-Requested-With');res.header('Access-Control-Allow-Headers','Content-Type');next();});//heremycodesapp.post('/check/:item',function(req,res){if(req.params.item=="user"){varuser=req.body.username;res.send(user);}})app.listen(3000,function(err){if(err){console.error(err);}else{console.log("listenonport3000");}})最后是ajax的代码,其他地方都没问题,onchange取到user.value的值然后发送后台:$.ajax({type:"post",url:"check/user",//配置过devServer中的proxy//dataType:"json",data:{username:user.value},success:(data)=>{console.log(data,$.type(data));return;},error:(xhr)=>{console.log("出错啦:"+xhr.status)}});尝试修改过的部分包括以下,但是都不行:ajax的url写成/check/user或者localhost:服务器端口号webpack的devServer的contentBase处,以及proxy写成:proxy:{"/check/*":{secure:false,target:"http://localhost:3000",//跨到哪儿去^-^changeOrigin:true//允许跨域,必不可少}}
慕婉清6462132
相关分类