【JavaScript】了解跨域

跨域

## 同源策略

• 同源策略（Same origin policy）是一种约定，它是浏览器最核心、最基本的安全功能。如果缺少了同源策略，浏览器的正常功能可能会受到影响
• 可以说 Web 是构建在同源策略基础上的，浏览器只是针对同源策略的一种实现
• 同源策略是由 Netscape (网景公司) 提出的一个安全策略。现在所有支持 JavaScript 的浏览器都会用这个策略
• 同源是指，域名，协议，端口相同
  
  
  

Ajax 不能跨域

get 请求是没有跨域问题的，其它请求才有跨域问题，eg：post、head、put、del…

$.ajax({
    url: 'http://127.0.0.1/a.txt',
    type: 'get',
    success(data) {
        console.log(data);
    },
    error(err) {
        console.log(err);
    }
})

解决跨域问题

通过 cors 解决跨域问题

cors 是一种解决跨域的技术，在后台中设置响应

Access-Control-Allow-Origin: *

app.post('/', (req, res) => {
    res.set('Access-Control-Allow-Origin', '*');
    res.json({
        name: 'superman',
        age: 28
    });
});

通过 Jsonp 解决跨域问题

• JSON 是一种数据交换格式
• JSONP 是一种被开发人员创造出来的、非官方的跨域数据交互格式

所谓 JSONP，就是在本地定义一个函数，然后通过 src 引入一个服务器上的 JS 文件，该文件中刚好有同名函数执行，通过传参进行数据的传递

• Jsonp 的用例：

let btn = document.getElementById('btn');
let text = document.getElementById('text');
let box = document.getElementById('box')

text.oninput = function () { // 创建 script 标签
    let script = document.createElement('script');
    script.src = 'https://www.baidu.com/sugrec?prod=pc&wd=' + this.value + '&cb=callback';
    document.body.appendChild(script);
}

let ul = document.createElement('ul');

function callback(json) {
    let data = json.g || []; // 设置默认值
    let len = data.length < 5 ? data.length : 5; // 控制长度

    ul.innerHTML = '';
    data.forEach((item, i) => { // 添加 ul 的内容
        if (i < 5) {
            console.log(item);
            ul.innerHTML += `<li>
<a href='https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=${item.q}&oq=wuwei&rsv_pq=e7dc2584000228ca&rsv_t=dda6iiIYXdFazi91l%2Fk3IyQMCXIamUeu2cfM8gS%2BOJOxEoTR6xA%2Bp3b%2FsO0&rqlang=cn&rsv_enter=0' target='_self'>${item.q}</a>  
</li>`;
            console.log(ul);
        }
    })

    box.appendChild(ul);
}

btn.onclick = function () {
    location.href = 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=' + text.value + '&oq=wuwei&rsv_pq=e7dc2584000228ca&rsv_t=dda6iiIYXdFazi91l%2Fk3IyQMCXIamUeu2cfM8gS%2BOJOxEoTR6xA%2Bp3b%2FsO0&rqlang=cn&rsv_enter=0';
}

• jQuery 中的 Jsonp 用例

text.oninput = function () {
    $.ajax({
        url: 'https://www.baidu.com/sugrec',
        data: {
            prod: "pc",
            wd: this.value,
            cb: "callback"
        },
        dataType: 'jsonp',
        jsonpCallback: 'callback',
        success (data) {
            console.log(data);
        }
    })
}