JSONP 解决跨域问题

jsonp是跨域问题的一种解决方案，是一种常用的跨域手段，只支持JS脚本和JSON格式的数据本质是利用同源策略的漏洞

一、什么是跨域？

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

二、引起跨域的原因

1.浏览器安全限制

2. 同源策略

3. XHR(XMLHttpRequest)请求

三、跨域错误

跨域错误提示

四、解决方案

1. 写入配置文件

在nginx文件夹下的conf文件里有个nginx.conf文件，在location后面加上设置头部的属性，如下：

    location / {
            root  html/dist;  #打包后的dist根目录
            autoindex on;       #开启nginx目录浏览功能
            autoindex_exact_size off;   #文件大小从KB开始显示
            charset utf-8;          #显示中文
            
            #解决跨域问题
            add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式
            add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
            add_header 'Access-Control-Allow-Headers' 'x_hztz_token,*';
    }

配置好nginx.conf文件后需要重启nginx服务器

2. jsonp解决

jsonp解决跨域问题

服务端：将服务端返回数据封装到指定函数中返回 callback({返回数据})

客户端：不管是我们的script标签的src还是img标签的src，或者说link标签的href他们没有被同源策略所限制，比如我们有可能使用一个网络上的图片，就可以请求得到；所以利用同源策略漏洞，将访问地址放在下面的标签的路径中，<script src="www.baidu.com"> 、< img src=""/>、 <link href=""/>来解决跨域的问题

下面直接放入源码

<body>
     <!-- 1. 设置点击事件 -->
    <button onclick="getData()">获取数据jsonp方式</button>

    <script>
        // 2. 设置点击事件，参数是一格回调函数myJsonp()，myJsonp()的参数是一个对象，对象中有url地址
        function getData(){
            myJsonp(
                {
                  url:"http://192.168.0.101/music/data/music_jsonp.json",
                }
            );
        }
        
        //3. 定义myJson()函数，创建script标签，设置src地址为请求的地址
        //利用同源策略漏洞, <script src="http://192.168.0.101/music/data/music_jsonp.json">
        function myJsonp(params){
            const scriptEle = document.createElement("script");

     //4. 回调函数，由系统调用，打印请求的数据结果
        function callback(responseData){
            console.log(responseData);
        }
    </script>
</body>

3. jquery中用jsonp解决

直接上源码

注意：jsonp只支持get请求，不支持post请求

<body>
    <button onclick="getData()">获取数据jsonp方式</button>
    
    <!-- 引入jquery -->
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        function getData(){
            $.ajax({
                url:"http://192.168.0.101/music/data/music_jsonp.json",
                dataType: "jsonp", //返回数据类型
                jsonpCallback: "callback", //指定回调函数名
                success: function(res){
                    console.log(res);
                },
                error:function(err){
                    console.log(err);
                }
            })
        }
    </script>
</body>