前端实现跨域的三种方式

前端解决跨域的三种方式：
1.cors跨域（只需要后端配置）
header(“Access-Control-Allow-Origin:*”); // 允许任何来源
header(“Access-Control-Allow-Origin:http://me.com”);//只允许来自域名http://me.com的请求
2.jsonp跨域：（需要前后端一起配合）
jsonp跨域只能解决get请求的跨域，再前端中，不管是script标签的src属性，还是img标签的src属性，还是a标签的href属性，其实都不受同源策略的限制。jsonp跨域就是巧妙的运用了这一特性实现的跨域

实现方法：在点击发送按钮之前，创建一个script标签，给script标签的src属性设置为服务器的请求地址，参数用问好拼接，callback参数是用来接受请求返回值的参数，所以一定要写！

<button click="sendFunc()">点击发送请求</button>

<script>function sendFunc(){let frame = document.createElement('script');frame.src = 'http://localhost:5000/api/list?name=zhang&age=18&callback=func;document.('body').append(frame);};function func(res){console.log(res);//这里就是sendFunc请求返回的结果}
}
</script>

服务器端实现：

router.get('/api/list', (req, res) => {console.log(req.query, '123');let data = {message: 'success!',name: req.query.name,age: req.query.age}data = JSON.stringify(data)res.end('func(' + data + ')');//func和前端函数名保持一致

3.代理服务器proxy：
可以配置多个代理，且可以灵活控制请求是否走代理。
vue.config.js

module.exports={pages:{index:{//入口entry:'src/main.js',},},lintOnSave:false,//关闭语法检查//开启代理服务器 方法一// devServer:{//paroxy:'http://localhost:5000',//5000服务器端口号，// },//方法二：devServer:{proxy:{// 请求前缀/api，只有加了/api前缀的请求才会走代理(前端自定义)'/api':{target:'http://localhost:5000',pathReweite:{'^/api':''},//重写//ws:true,//用于支持websocketchangeOrigin:true,//用于控制请求头中的host值，默认true，react中默认false}}}
}

发送请求
methods:{getFunc(){//8080为vue-cli本地启动的端口号，因为设置了代理服务器axios.get('http://localhost:8080/api/students').then(res={console.log('请求成功',res)},error=>{console.log('请求失败',error)})}
}

前端实现跨域的三种方式相关推荐

什么是同源策略及解决跨域的三种方式
同源策略 1.1.1 所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个 ip 地址,也非同源.同源策略/SOP(Same origin policy)是一种约 ...
前端处理跨域的几种方式
什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.资源跳转:A链接.重定向.表单提交 2.资源嵌入: <link>.<scr ...
$.ajax 加了headers报错_Springboot解决Ajax跨域的三种方式
这篇文章不华丽,但比较实用,能解决不少大家实际业务中的问题.大家可以收藏起来,以备用时之需! 1.同源策略 1.1 含义 ajax出现请求跨域错误问题,主要原因就是因为浏览器的"同源策略&q ...
什么是同源策略？解决跨域的三种方法？
1.同源策略同源策略是一种约定和规范好的安全策略,是浏览器最核心最基本的安全保障.同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据. 满足的条件: (1)协议要相同:HTTP.HTT ...
只有ajax会跨域吗_ajax处理跨域有几种方式
jQuery 使用 JSONP 缺点: 1.这种方式无法发送post请求(这里) 2.另外要确定jsonp的请求是否失败并不容易,大多数框架的实现都是结合超时时间来判定. 跨域的几种方式在项目中可能 ...
SpringBoot解决跨域的5种方式
本文来说下SpringBoot中实现跨域的5种方式. 文章目录什么是跨域 java解决CORS跨域请求的方式返回新的CorsFilter(全局跨域) 重写WebMvcConfigurer(全局跨域 ...
前端交互之“解决前端跨域的三种方法”
1.什么是前端跨域? 跨域是浏览器为了安全而做出的限制策略:浏览器请求必须遵从同源测试: http://www.bilibili.com:8080:/anime/?key=calue路径键值对同协 ...
前端解决跨域的九种方法
什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.资源跳转:A链接.重定向.表单提交 2.资源嵌入: <link>.<scr ...
php 跨域读php_php跨域的几种方式
PHP实现跨域的几种形式 1.JSONP(JSON with padding)原理利用html里面script标签可以加载其他域下的js这一特性,使用script src的形式来获取其他域下的数据, ...

前端实现跨域的三种方式

前端实现跨域的三种方式相关推荐

最新文章

热门文章