关于Vue2.0，Express实现的简单跨域

npm install express -g

通过npm全局安装express，之后可以通过

express --version

来查看express版本

express server

通过express server生成server项目文件

npm install

安装server的项目依赖

可以通过执行server下的bin\www文件可以开启服务

在www文件我们可以默认监听的端口为3000

var port = normalizePort(process.env.PORT || '3000');

通过访问http://localhost:3000就可以看到Express的欢迎页。

在index文件，定义一个映射，请求这个地址（ http://localhost:3000/test），返回一个简单的JSON

服务端暂时先结束。

通过vue-cli创建一个简单的项目，步骤见vue官方文档，再安装axios或者vue-resource进行ajax请求。

在main.js下，可以在mounted方法里实现一个get请求

mounted方法会在vue挂载完成后执行一次，详见vue的生命周期。

此时执行

npm run dev

通过8080端口可以访问vue页面，在控制台可以看到如下错误

页面并不能直接请求到不同端口的资源，这里需要实现一个跨域。

回到服务端

解决这个问题，我们可以借助cors包实现

npm install cors --save

在app.js中，对cors进行配置，允许访问的域，请求，请求头

app.use(cors({origin:['http://localhost:8080'],methods:['GET','POST'],alloweHeaders:['Content-Type', 'Authorization']
}));

重启服务后，可以看到数据被前端成功获取

不通过cors包，还可通过app.all进行配置

app.all('*',function (req, res, next) {res.header('Access-Control-Allow-Origin', 'http://localhost:8080');res.header('Access-Control-Allow-Headers', 'Content-Type');res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');　next();　
});

转载于:https://www.cnblogs.com/kevin-zjy-blog/p/7357220.html

关于Vue2.0，Express实现的简单跨域相关推荐

简单跨域请求和带预检的跨域请求
受浏览器的同源策略限制,JavaSript只能请求本域内的资源.跨域资源共享(Cross-Origin Resource Sharing, CORS)是为解决Ajax技术难实现跨域问题而提出的一个规范 ...
vue学习（八）vue2.0路由vue-router的简单入门使用
vue-router官网中文文档:Vue Router Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.路由实际上就是可以理 ...
基于Vue2.0+Vue-router构建一个简单的单页应用
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是目前最火的前端框架, vue.js ...
yii2 跨域请求配置_伸手党系列四：vuecli3.0以上使用 proxy 进行跨域设置
跨域:出于浏览器的同源策略限制,当一个请求url的协议.域名.端口三者之间任意一个与当前页面url不同即为跨域. process:process 对象是一个全局变量,它提供有关当前 Node.js 进 ...
映驰科技发布域控DCU3.0，加速赋能L3跨域融合落地
当前,全球头部车企纷纷启动了全新一代域集中式电子电气架构的开发,并积极部署相应的软件能力. 例如,长城汽车计划2022年推出的全新一代架构GEEP 4.0将进化形成中央计算.智能座舱及高阶自动驾驶三大 ...
浅谈node结合express第三方插件使用跨域
目录 node实现跨域 CORS实现跨域 jsonp 创建一个服务器 index.js文件的路由的配置! user.js文件 => 定义着user的相关路由前端发起一个jsonp请求服务器 ...
express使用cros开启跨域访问
如果跨域,前端直接请求后端数据会报错 Access to XMLHttpRequest at 'http://127.0.0.1:8080/' from origin 'null' has been ...
node ，express框架后台设置跨域操作,路由中间件
express项目入口文件下app.js 设置跨域操作 app.all('*', function(req, res, next) { res.header("Access-Control- ...
Django框架深入了解_05 (Django中的缓存、Django解决跨域流程(非简单请求，简单请求)、自动生成接口文档)(二)
二.跨域: 回到顶部跨域知识介绍: 点我以前博客跨域解决方法:CORS:跨域资源共享 CORS请求分类(简单请求和非简单请求) 简单请求(simple request):只需要在头信息之中增加一个 ...

关于Vue2.0，Express实现的简单跨域

关于Vue2.0，Express实现的简单跨域相关推荐

最新文章

热门文章