两种可以支持跨域的方式

针对项目：vue.js + Express

本例的vue.js项目使用Express框架作为后台数据服务端

什么叫做跨域？

通常情况下是指两个不在同一域名下的页面无法进行正常通行，或者无法获取其他域名下的数据。

主要原因：

是浏览器出于安全问题考虑，采用了同源策略，通过浏览器对JavaScript限制，防止用户恶意获取非法数据。
如果直接请求不支持跨域的服务，控制台就会console报错。

因为极大多数依赖后端数据服务器的项目，都需要进行跨域请求。
所以，这里vuejs和express提供了两种可以支持跨域的方式。

第一种 · 跨域方式

首先是vue.js的方式，对于不支持跨域的服务器端的请求，客户端不能配置影响到服务端的代码。如果需要完成该功能，可以使用vue-resource的jsonp()方法，具体的请求代码如下所示：

this.$http.jsonp('/someUrl, [data], [options]).then(successCallback, errorcallback);

注意几点 jsonp()：

jsonp()不能发送post请求，不管是否跨域；

只要用jsonp()方式，则该请求一定是get方式的；

因为本质是script方式加载的。

使用jsonp()方式非常麻烦，由于本次服务端也可以直接更改，
所以这里不适用此方法进行配置。
只是告知读者可以使用此方式发送请求。

=======================================================================

第二种 · 跨域方式

需要更改Express编写的服务端的代码，在app.js中进行全路由的配置，具体代码如下：

app.all('*', function (req, res, next) {res.header('Access-Control-Allow-Origin', '*');res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With, yourHeaderFeild');res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');if (req.method == 'OPTIONS') {res.send(200);  // 请求快速返回}else {next();}
});

注意几点：

此代码需要咋所有的路由路径配置之前执行，否则代码之前定义的路由不接受此跨域的头部配置。
如果开发者不需要所有的路由都支持跨域，也可以选择在单个路由中配置相关的头信息。

以上就是关于“ vue.js支持的两种跨域方式 - 讲解篇 ” 的全部内容。

两种可以支持跨域的方式 - 讲解篇相关推荐

同源策略_如何支持跨域
欢迎大家阅读<朝夕Net社区技术专刊> 我们致力于.NetCore的推广和落地,为更好的帮助大家学习,方便分享干货,特创此刊!很高兴你能成为忠实读者,文末福利不要错过哦! 01 PART ...
javascript中实现跨域的方式总结
js中的跨域请求应该也算是一个重点,具体什么叫跨域,在这里我就不展开了,可以查一下浏览器的同源策略和跨域的定义.原来只知道常用的jsonp和document.domain这两种方式,这几天学习了一下其 ...
SpringBoot2.1.5 (22)--- SpringBoot设置支持跨域请求
SpringBoot2.1.5 (22)--- SpringBoot设置支持跨域请求现代浏览器处于安全的考虑,在http/https请求时必须遵守同源策略,否则即使跨域的http/https 请求, ...
python跨域攻击教学_关于python 跨域处理方式详解
因为浏览器的同源策略限制,不是同源的脚本不能操作其他源下面的资源,想操作另一个源下面的资源就属于跨域了,这里说的跨域是广义跨域,我们常说的代码中请求跨域,是狭义的跨域,即在脚本代码中向非同源域发送ht ...
跨域解决方式——JSONP，CORS
文章目录 1.同源策略于跨域 1.1 同源策略 1.2 跨域 1.3 为什么要设定跨域这个概念 2.解决跨域的方案 2.1 jsonp 2.2 CORS 2.3 CORS和jsonp的比较 1.同源策 ...
用 nginx 代理 MailChimp API 并支持跨域
tl;dr nginx 既灵活方便,又功能丰富,可以帮助我们实现添加跨域头.URL 重写以及隐藏敏感信息等功能.本文介绍在使用 MailChimp 进行邮件营销中遇到的一个普遍问题,分析了浏览器发起跨 ...
ssm把图片保存到项目中_项目中的图片跨域问题解决方式
现象首先,在生产环境中,由于进行编辑图片时,将图片回显到ReactCrop组件中进行可裁剪编辑,然而回显时,需要将图片转化为base64的格式或者blob对象, 此时需要将图片次绘制成canvas进 ...
给图像增加一种噪声，构造并利用至少两种高通滤波器实现频率域的滤波
给图像增加一种噪声,构造并利用至少两种高通滤波器实现频率域的滤波欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢迎页.如果你想学习如何使用Markdown ...
如何判定API接口是否支持跨域访问
1.背景同一个h5页面需要访问多个不同的域名下的地址 2.判定方式方式一在浏览器控制台执行如下代码: var xhr = new XMLHttpRequest(); xhr.open('GET' ...

两种可以支持跨域的方式 - 讲解篇

针对项目：vue.js + Express

什么叫做跨域？

主要原因：

第一种 · 跨域方式

注意几点 `jsonp()`：

第二种 · 跨域方式

注意几点：

两种可以支持跨域的方式 - 讲解篇相关推荐

最新文章

热门文章

两种可以支持跨域的方式 - 讲解篇

针对项目：vue.js + Express

什么叫做跨域？

主要原因：

第一种 · 跨域方式

注意几点 jsonp()：

第二种 · 跨域方式

注意几点：

两种可以支持跨域的方式 - 讲解篇相关推荐

最新文章

热门文章

注意几点 `jsonp()`：