同源策略和跨域-CSDN博客

本文链接：https://blog.csdn.net/idiot_MAN/article/details/126738106

同源策略和跨域

文章目录

同源策略和跨域

同源策略

什么是同源策略

如果两个页面的协议 (http) ，域名(www.xxx.com) 和端口（80） 都相同，则两个页面具有相同的源

http://www.test.com/index.html

 http://www.test.com/outer.html      同源
 https://www.test.com/about.html     不同源    协议不同
 http://blog.test.com/index.html     不同源    域名不同
  http://www.test.com:80/outer.html   同源

同源策略是浏览器提供的一个安全策略

浏览器规定:A网站的JavaScript  不允许和非同源的 网站c之间 进行资源交互

跨域

什么是跨域

同源是两个url的协议，域名，端口一致，反之就是跨域

出现跨域的原因:浏览器的同源策略不允许非同源的url之间进行数据交换

网页   http://www.test.com/index.html

接口:  https://www.api.com/index.html

在这里插入图片描述

报错出现：Access-Control-Allow-Origin 就是跨域

解决跨域

两种方案解决跨域: JSONP 和CORS

JSONP

出现的早，兼容性好，程序员为了解决跨域问题，被迫想出来的一种临时解决方案，缺点:只支持get请求，不支持post请求

浏览器的同源策略限制，网页中无法通过Ajax请求非同源的接口数据，但是script标签不受同源策略的限制，可以通过src属性，请求非同源的js脚本

jsonp的实现原理：就是通过script标签的src属性，请求跨域的数据接口，通过函数调用的形式，接收跨域接口响应回来的数据

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    function abc(data) {
      console.log('jsonp请求')
      console.log(data)
    }
  </script>

  <!-- 返回的是函数调用 -->
  <script src="http://www.liulongbin.top:3006/api/jsonp?callback=abc"></script>


  <!-- jsonp和ajax之间没有任何关系 -->
</html>

CORS

CORS：出现的较晚，是W3C标准，属于跨域Ajax请求的根本解决方案，支持GET和POST请求，不兼容低版本的浏览器

jQuery中JSONP的实现

jQuery中的JSONP 通过script标签的src属性，实现跨域数据访问的，jQuery采用的是动态创建和移除script标签的方式，来发起JSONP数据请求

在发起JSONP请求的时候，动态向head中append一个script标签

JSONP请求成功之后，动态从head中移除刚才append进去的script标签

$(function () {
      $.ajax({
        url: "http://www.liulongbin.top:3006/api/jsonp?name='zs'&age=12",
        dataType: 'jsonp',
        // 发送到服务器的参数名称，默认值为callback
        jsonp: 'callback',
        // 自定义回调函数名称 默认值为jQueryxxxx
        jsonpCallback: 'abc',
        success(res) {
          console.log(res)
        },
      })
    })