跨域

解决跨域访问,最常用有三种办法

  • CORS
  • jsonp
  • 代理

CORS

cross origin resource share,跨资源共享

  • 主要是站在服务端的角度,对外开放访问权限
  • 要求,我们需要有权限去编写(修改)服务端的代码
  • 同时,在浏览器端,不用写任何代码

注意:

Cors插件不是真正的解决方案,只是一个临时,在开发的时候,可以用一用而已。
项目上线的时候,不可能使用这种方案。

jsonp

json with packing,json的一个包装,是一种协议,协议用来传递数据的。是途径。好比是传递情报的方式。

原理:

因为script标签 本身是可以进行跨域访问的,我们利用这一点,创建一个方法,动态的去添加一个script标签,并指定url,当请求成功,服务端返回一个js字符串,作为script标签内容,可以直接被js执行

我们可以通过在浏览器端定义一个函数callback,传递给服务端,服务端可以获取这个callback,并把要返回的数据,作为这个callback的参数,返回callback,

function addScript(url) {
    let script = docunment.creatElement('script');
    script.src = url;
    documnet.body.appendChild(script);
}
function cb(res){
    console.log(res);
}
addScript('网址?callback=cb');

注意

要实现jsonp,在服务端和浏览器端都需要编写相应的代码。
Jsopn的原理是基于script标签,它==只能实现get跨域==,不能实现post跨域。[注意]

jsonp和json的区别,

  • Json,javascript object notation,js对象表示,是一个种格式,本质是字符串。是数据。好比是情报。
  • Jsonp,json with packing,json的一个包装,是一种协议,协议用来传递数据的。是途径。好比是传递情报的方式。

代理

因为cros和jsonp都是需要后端有配合代码,所以当后端没有配合代码的时候,我们可以自己写一个后端,然后替前端去请求数据

我们可以把要请求的接口作为数据发送给 作为代理的后端

$.ajax({
    url: '/daili',
    type: 'get',
    data: '接口地址',
    datatype: 'json',
    seccess: function(res){
        console.log(res);
    }
})

接着后端获取到发送的数据

app.get('/daili', (req, res) => {
    let url = req.query.url;
    http.get(url, (response) => {
        let data = '';
        response.on('data', (chunk) => {
            data += chunk;
        });
        response.on('end', () => {
            res.json(JSON.parse(data));
        })
    })
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • http协议 Resource,URL,Request,Response,Headers http 请求的是资源R...
    Sharise_Mo佩珊阅读 703评论 0 4
  • 1. 什么是同源策略 浏览器限制不同源的两个网站间脚本和文本的相互访问,只允许访问同源下的内容。所谓同源,就是指两...
    熊蛋子17阅读 698评论 1 6
  • 题目1.什么是同源策略? 同源策略(Same origin Policy): 浏览器出于安全方面的考虑,只允许与本...
    FLYSASA阅读 1,752评论 0 6
  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    w_zhuan阅读 532评论 0 0
  • 丁酉年,生肖兔者,冲太岁,诸事不宜。 丁酉年,双春闰月桃花年。 在没有进入2017年的时候,看到这样的年岁信息,心...
    冰果真多阅读 222评论 1 3