《我对跨域的了解》

菜鸟奋飞之路
140 阅读2分钟

1. 什么是同源策略tongy

如果两个URL 的协议、端口、域名都完全一致，则这两个 URL 是同源

baidu.com与https://www.baidu.… 不同源

完全一致才是同源

2.同源策略怎么做？

在游览器里打开页面，就默认遵守同源策略。

3. 为什么游览器要设定这样做？

为了保护用户隐私和数据安全，不同源的页面之间，不能互相访问数据

4.缺点

很多时候，前端需要访问另一个域名的后端接口，会被游览器阻止其获取响应。

比如A站点通过 AJAX 访问 B 站点 的/money 查询余额接口，请求会发出，但是响应会被游览器屏蔽。

怎么解决，跨域

5. 什么是跨域

跨域：浏览器从一个域名的网页去请求另一个域名的资源时，出现域名、端口、协议任一不同，都属于跨域。

6. JSONP 跨域

JSONP是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

JSONP请求原理：

（1）甲站点利用script 标签 可以跨域的特性，向乙站点发送 get 请求。

（2）乙站点 后端改造(json文件内容传进js文件中) js 文件的内容，将数据传进回调函数。

（3）甲站点通过回调函数得到js格式数据后，提取里面的json数据。

需要获取数据的jsonp代码frank.js

const random = 'frankCallbackName'+Math.random()
console.log(random)
window[random] = (data) => {
  console.log(data)
}

const script = document.createElement('script')
script.src = `http://qq.com:8888/friends.js?callback=${random}`
//删除多余的script标签
script.onload = ()=>{
    script.remove();
}
document.body.appendChild(script)

jsonp获取数据.png

  • 优点

    兼容ie;
    可以跨域；
    改动小，只需后端改动js文件内容

  • 缺点：

1、由于他是script标签，读不到像AJAX那样精确的状态码，也不知道响应头等，只知道成功或者失败；
2、由于他是script标签，所以只能发GET请求，所以不支持POST。
3、用户认证缺失，没有这个功能。

7. CORS 跨域

  1. 全称跨域资源共享，用来绕过SOP(同源策略)来实现跨域访问的一种技术。

  2. CORS漏洞利用CORS技术窃取用户敏感信息

    A、简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息 header 之中，增加一个

**Access-Control-Allow-Origin:http://甲站点**字段。

详细参考CORS - 术语表 | MDN (mozilla.org)

if(path === '/friends.json'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/json;charset=utf-8')
    response.setHeader('Access-Control-Allow-Origin','http://frank.com:9999')
    console.log("friends.json")
    response.write(fs.readFileSync('./public/friends.json'))
    response.end()
  }

cors获取数据.png

B、复杂请求，如 post, 乙站点需要：

  • 响应 OPTIONS 请求，在响应头中 添加如下响应头
Access-Control-Allow-Origin:https://甲站点
Access-Control-Allow-Methods:POST,GET,OPTTIONS
Access-Contorl-Allow-Headers:Content-Type
  • 响应 POST 请求，在响应中添加 Access-Control-Allow-Origin 头

C、如果需要附带身份信息，JS中需要在AJAX中设置 xhr.withCredentials = true

avatar
文章
阅读
粉丝