当前位置: 首页 > 后端技术 > Node.js

express和vue模拟跨域访问(主要是在本地开发环境下,不是打包后)

时间:2023-04-03 11:08:14 Node.js

1.生成express项目,开启本地服务创建login,route,corsimport需要npmicors--save,设置origin为Allowacertainaccess;app.js和login.js是app.jsvarcreateError=require('http-errors');varexpress=require('express');varpath=require('path');varcookieParser=require('cookie-parser');varlogger=require('morgan');varcors=require('cors');varindexRouter=require('./routes/index');varusersRouter=require('./routes/users');varloginRouter=require('./routes/login');const{METHODS}=require('http');varapp=express();app.use(cors({origin:'http://localhost:8080',//表示请求的源地址//'Access-Control-Request-Method':'post',allowedHeaders:['Conten-Type','Authorization']}))//视图引擎设置app.set('views',path.join(__dirname,'views'));app.set('viewengine','jade');app.use(logger('dev'));app.use(express.json());app.use(express.urlencoded({extended:false}));app.use(cookieParser());app.use(express.static(path.join(__dirname,'public')));app.use('/',indexRouter);app.use('/users',usersRouter);app.use('/login',loginRouter)//捕获404并转发到错误处理程序app.use(function(req,res,next){next(createError(404));});//errorhandlerapp.use(function(err,req,res,next){//设置局部变量,只提供开发中的错误res.locals.message=err.message;res.locals.error=req.app.get('env')==='development'?err:{};//渲染错误页面res.status(err.状态||500);res.render('error');});module.exports=app;login.jsvarexpress=require('express');varrouter=express.Router();/*GETloginpage.*/router.get('/',function(req,res,next){res.json({name:'admin',pwd:'123456'});});module.exports=router;npm运行start打开express项目,输入地址http://127.0.0.1:3000/login查看登录用户,密码数据2.vue-cli3搭建项目访问登录数据,axios插件在需要引入npmiaxios--savevue.config.jsmodule.exports={publicPath:process.env.NODE_ENV==='production'?'/':'/',assetsDir:"资产s",filenameHashing:false,lintOnSave:'warning',devServer:{host:"localhost",port:'1000',https:false,open:false,proxy:{"/login":{目标:"http://127.0.0.1:3000",//要访问的接口域名//ws:true,//是否开启websocketschangeOrigin:true,//开启代理:会在本地创建一个虚拟服务器,然后请求的数据会同时发送,//和接收请求的数据,这样服务器与服务器之间的数据交互就不会有跨域问题//pathRewrite:{//'^/api':''//这里理解为使用'/api'而不是target中的地址,比如我要调用//'http://40.00.100.100:3002/user/add',就写'/api/user/add'directly//}}},overlay:{warnings:true,errors:true},},pages:{index:{//页面条目entry:'src/main.js',//templatesourcetemplate:'public/index.html',//在dist/index.html中输出filename:'index.html',//使用ti时tleoption,//模板中的title标签需要为<%=htmlWebpackPlugin.options.title%>title:'Exerciseaboutconfiguration',//该页面包含的块,默认该案例将包含//提取的公共块和供应商块chunks:['chunk-vendors','chunk-common','index']},//当使用entry-only字符串格式时,//模板将是推断为`public/subpage.html`//如果找不到则回退到`public/index.html`。//输出文件名将被推断为`subpage.html`。//subpage:'src/subpage/main.js'}}main.jsimportVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importaxiosfrom'axios'//importVue.prototype.$axios=axios;axios.defaults.baseURL='';Vue.config.productionTip=falsenewVue({router,render:function(h){returnh(App)}}).$mount('#app')Home.vue总结,cors的orgin如果设置了允许的域名或者没有设置,都可以访问该域名,但是如果设置了,vue需要通过proxy进行代理,但是要注意默认的axios.defaults.baseURL='http://127.0.0.1:3000';不要设置,否则用户将无法访问