前端同源策略和跨域详解

文章目录

    • 同源策略和跨域
        • 同源策略
        • 跨域
        • 如何实现跨域
          • JSONP
          • CORS跨域资源共享
          • http proxy =>webpack
          • 其他不常用的跨域方式

同源策略和跨域

同源策略

同源:两个页面的协议、域名、端口号都相同

同源策略:是浏览器提供的一个安全功能(浏览器规定,非同源网站JS不能进行资源交互)

  • 无法接触Cookie、LocalStorage、IndexedDB;防止恶意网站通过js获取用户其他网站的cookie
  • 无法接触DOM,因为恶意网站可以通过iframe打卡银行界面,如果可以获取DOM就相当于可以获取整个银行界面的信息
  • 无法发送ajax请求
跨域

不符合同源策略的行为
前端同源策略和跨域详解_第1张图片

浏览器允许发起跨域请求,但是跨域请求回来的数据会被浏览器拦截

如何实现跨域
  • JSONP:出现的早,兼容性好。只支持get请求。
  • CORS:出现的晚,支持head、get、post。不兼容低版本的浏览器。
  • 使用 proxy反向代理
JSONP

由于浏览器同源策略的限制,网页无法通过Ajax请求非同源的接口数据,但是

你可能感兴趣的:(前端,项目实战,#,JavaScript,前端,javascript,开发语言)