js跨域（为了去掉感叹号不得已加长）

淡淡的烟草味﹌ 2022-12-24 10:59 100阅读 0赞

# 跨域 #

## 同源策略 ##

> // 浏览器有一个规则  
> // 如果不是同一个服务器出来的文件不允许请求的  
> // 跨域 - 不同域名下的文件希望能请求过去  
> // 同源策略  
> // 同源：同协议，同域名，同端口  
> // 只要有一个不同，就是不同源 - 跨域

## 如何实现跨域 ##

### 服务器端做代理 ###

浏览器只能限制前端，不能限制服务器端
    
    //利用PHP不受浏览器同源限制，代替ajax做请求
    
    sendAjax({
        
        url:"demo.php",
        dataType:"string",
        success(res){
        
            console.log(res);
        }
    })
    php文件：
    file_get_contents(“http://www,baidu.com”);
    echo   $str;

### 设置响应头 ###

我用的是phpStudy

ajax直接跨域会报错，缺少（Access-Control-Allow-Origin）响应头
    
    header(“Access-Control-Allow-Origin:*”);
    
    
    设置一个虚拟主机：
    另外再做一个域名，来模拟请求
    虚拟主机：在自己的电脑上另外配置一个域名
    /*
    打开phpstudy的”其他选项菜单”中的”站点域名管理”
    设置域名，设置对应的目录（建个www.qianduan2005.com）
    点击新增，点击保存设置并生成配置文件
    
    
    设置自域名对应的IP地址：
    打开C:\Windows\System32\drivers\etc\hosts
    复制一份放桌面，将桌面上的这个文件打开并修改
    
    在文件最下面添加一行代码：
    127.0.0.1   www.qianduan2005.com
    将修改后的文件拖到原来的路径覆盖
    重启服务器
    在配置好的文件夹中创建一个index.php
    输出”this is new server”
    
    在浏览器中输入www.qianduan2005.com访问
    出现this is a new serverv表示在自己电脑上又配置了一个域名
    */
    
    在刚配置的index.php配置
    header(“Access-Control-Allow-Origin:*”)

### 服务器做代理 ###

### jsonp跨域 ###

> // 最常用的最重要的跨域手段  
> // jsonp跨域  
> // img src 发送了get请求  
> // 原理：利用标签的属性不受同源策略限制  
> // img的src link标签的href属性 script的src  
> // script的src会将请求回来的数据当做js代码执行

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Document</title>
    
    </head>
    <body>
    <input type="text" name="keywords">
    <ul></ul>
    </body>
    <script type="text/javascript">
    // function fn(res){
        
    //     var ul = document.querySelector("ul");
    //     // console.log(res);
    //     var arr = res.g;
    //     ul.innerHTML = '';
    //     if(!arr){
        
    //         return false;
    //     }
    //     for(var i=0;i<arr.length;i++){
        
    //         var li = document.createElement("li");
    //         li.innerText = arr[i].q;
    //         ul.appendChild(li)
    //     }
    //     document.body.appendChild(ul)
    //     document.head.removeChild(document.head.lastElementChild)
    // }
    var keywords = document.querySelector("[name='keywords']");
    keywords.oninput = function(){
        
        jsonp('https://www.baidu.com/sugrec',{
        
            pre:1,
            p:3,
            'ie':"utf-8",
            json:1,
            prod:'pc',
            'form':'pc_web',
            wd:this.value,
            req:2,
            _:+new Date(),
        },function(res){
        
            var ul = document.querySelector("ul");
            var arr = res.g;
            ul.innerHTML = '';
            if(!arr){
        
                return false;
            }
            for(var i=0;i<arr.length;i++){
        
                var li = document.createElement("li");
                li.innerText = arr[i].q;
                ul.appendChild(li)
            }
        })
    }
    
    
    // keywords.oninput = function(){
        
    //     // 获取自己输入的值
    //     var data = this.value;
    //     // 动态创建script
    //     var script = document.createElement("script");
    //     script.setAttribute('src','https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&wd='+data+'&req=2&csor=2&pwd=j&cb=fn&_=1601265110730')
    //     document.head.appendChild(script);
    // }
    
    function jsonp(url,data,fn){
        
        var script = document.createElement("script");
        var str = '';
        var f = '';
        for(var attr in data){
        
            str += f + attr + "=" + data[attr];
            f = '&';
        }
        str += '&cb=cb'
        window.cb = fn;
        script.setAttribute('src',url + "?" + str)
        document.head.appendChild(script)
        script.parentElement.removeChild(script)
    }
    
    // jsonp('http://www.qianduan2005.com/index.php',{
        
    //     type:"jsonp"
    // },function(res){
        
    //     console.log(res);
    // })
    // console.log(window);
    // cb(123)
    
    </script>
    </html>