不会跨域问题?一分钟教会你三种办法,小白也能看懂。

导语:
我们前端开发过程中,经常会去调用接口,但是会遇到跨域无法请求的问题?别怕,这篇博客一分钟教会你学会跨域!!!

看官如果有其他前端问题,欢迎私信我!!

本文的目录一,为什么会跨域?二,解决跨域问题1,jsonp2,跨域资源共享,CORS3,后端代理

一,为什么会跨域?

这是因为有浏览器的同源策略,是评定一个浏览器是否合格的最基本标准。

什么意思呢?就是浏览器通过这个策略,将不同网站给隔离开了,确保了信息的安全。你想一想要是没有这个东西,我们是不是可以随便请求淘宝接口,甚至给post一些信息到它们接口上,那不就乱了套?

所以它是很必要的,我们再来明确一个概念,需要达到3个条件,相同协议,相同域名,相同端口,才能通讯。

不会跨域问题?一分钟教会你三种办法,小白也能看懂。

二,解决跨域问题
1,jsonp

首先我们先明白jsonp的原理,通俗的讲就是动态生成一个script,然后script不受同源策略的限制,就可以去请求不同域的接口了(不能理解?想象一下你的jQuery是怎么引入的,是不是script后面一个网址?道理是一样的。)

$.ajax({
url: 'http://www.a.com/getdetail', //请求接口
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
jsonpCallback: "handleCallback", // 自定义回调函数名
data: {}
});

jquery已经封装好这个函数,只要通过这个模式去写就行了,自动生成script去执行。

但是jsonp只能get,而不能post。

2,跨域资源共享,CORS

这个说白了就是后台代码允许某个域名下的请求,比如我是后台开发的人员,我可以写上允许http://www.xiaomizhou.com所有的接口调用,然后前端就不用做任何的解决跨域的操作,直接ajax请求就行了。

//服务端代码写上,允许http://www.xiaomizhou.com下的所有请求
'Access-Control-Allow-Origin' : 'http://www.xiaomizhou.com'

所以前端开发的同学,只要让你的后端同学写上,你就不用考虑这个跨域了。

3,后端代理

但是如果这个后台不是你们团队写的,你又很想去调用这个接口,那怎么办呢?

很简单,同源策略是哪里来的,浏览器规定的,那你不要在浏览器内发起请求不就好了!! 你可以写一个简单的后端程序,让你的调用接口请求让它去做。然后这个后端程序是你控制的,所以你想怎么请求都行。easy

来来来,接我一个简单的node后台模板

var http = require("http");
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer({});

var server = http.createServer(function(req, res) {
delete req.headers.host;
proxy.web(req, res, {target: 'http://www.taobao.com'});
});
console.log("proxy listening on port 80")
server.listen(80);

不会跨域问题?一分钟教会你三种办法,小白也能看懂。
建议收藏,不然划着划着可能找不到了~

你的点赞是对我最大的鼓励!

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

不会跨域问题?一分钟教会你三种办法,小白也能看懂。

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 不会跨域问题?一分钟教会你三种办法,小白也能看懂。
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏