js的同源策略和跨域访问 -cors、proxy、jsonp

同源策略？

同源策略，它是由Netscape提出的一个著名的安全策略，是浏览器最核心最基本的安全功能，web就是构建在同源策略的基础之上的。

源：域名，协议，端口

三者都必须相同，浏览器才会同意访问服务器，有一个不同，浏览器就会报异常，提示拒绝访问

不同源的数据怎么访问呢？   -- 跨域访问

跨域

跨域就是不受同源策略影响，访问不同源数据。

跨域的方式？

实现跨域有三种方式：

一、cors跨域

这种跨域方式是在后端完成的，在后端程序中写入相应代码声明允许这个页面的访问，就可以实现跨域

通俗来说，就是后端的服务器都允许你访问了，我这浏览器还管什么劲，就去呗！！

二、proxy跨域

也叫服务器代理

主要是在服务器配置中添加代码：

proxy /代理名称 {
    proxy_pass '请求的URL地址';
}

注意：这里一定要加 分号

在HTML页面中请求：

async function fun(){
    let res = await 数据请求函数('/代理名称','get','携带的参数和callback函数','json')
}

注意：在HTML里面，请求函数中写URL地址的那个参数填写 /代理名称，这个斜线不能省略，这个数据请求函数以及实参是根据自己封装的函数而定，这个只是大致的参考

三、jsonp跨域

主要就是通过script标签对象的src属性来设置，

在请求访问时，创建一个 script标签，给这个script标签对象添加src属性，属性值是URL地址和它携带的参数以及具体发出请求执行代码的callback函数，将这个script放入页面body中，最后删除这个导入的script标签对象就完成了

具体代码：

    // 创建script标签
        const s = document.createElement('script')
    // 设置src属性
        s.setAttribute('src', `URL地址以及携带的参数和callback函数`)
    // 将script标签放入body中
        document.body.appendChild(s)
    // 删除 导入后的script标签
        document.body.removeChild(s)

注意：只能接受 get 请求，不能接受 post 请求