同源策略

同源策略是浏览器的一个安全功能，不同源的网页脚本在没有明确授权的情况下，不能读写对方资源。所谓同源是指“协议+域名+端口”三者相同。

同源：当访问从一个地方访问另一个地方资源时，如果协议+域名+端口相同就是同源访问。

什么是跨域

使用AJAX技术（XMLHttpRequest 对象），从一个网页去请求另一个网页资源时，违反浏览器同源策略限制，引起的安全问题，称为跨域。

注：1、localhost和127.0.0.1虽然都指向本机，但也属于跨域

跨越解决方案

不使用 AJAX技术(XMLHttpRequest)请求

jsonp技术

jsonp技术利用script标签天生可以跨域特点解决跨域问题
代码动态创建script标签，将请求url地址作为script标签src属性值
jsonp需要服务端支持
把真正的数据封装到一个函数中一起返回
{code:1,info:'helloworld'}
callback({code:1,info:'helloworld'})

缺点: 只支持get请求

sendProductList('http://10.7.162.67:3000')

function sendProductList(url){
    let scriptEle = document.createElement('script') // <script>
    scriptEle.setAttribute('src',url)
    document.body.appendChild(scriptEle)
}
function callback(res){
    let resObj = JSON.parse(res)
    console.log(res)
    console.log(resObj)
}

授权跨域资源共享

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource ）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用sharing的限制。

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Credentials", "true");
res.header("Access-Control-Allow-MethodS", "GET, POST, PUT , DELETE, OPTIONS");

res.header("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With,

使用代理服务器

调用方设置代理：vue3为例配置 vue.config.js

devServer: {
    open: true,
    //浏览器打开新的窗
    host: '0.0.0.0', //允许ip访问，访问时使用ip地址
    port: 8888，//访问端口， 完整地址: http:// 192.168.0.100: 8080
    https: false,
    //配置跨域，第个参数 /api表示url以api开头的走代理 ，http://192.168 .0.100:8080/api/post/list
    proxy: {
        '/api': {
            target: 'http://192:168.8.108:8088/api', //填写真实的后台接口地址
            ws: true, //支持websokct
            chang0rigin: true, //允许跨域
            pathRewrite:{
                "^/api': ”11表示将以 /api开头的请求的地址中的 '/api'替换为''
            }
        }
    }
}

回调函数

将函数callBack作为参数传给函数fun, 在函数fun中以形参方式进行调用, 函数callBack就称为回调函数

回调函数作用:

将函数中的数据作为参数传给回调函数处理

处理异步任务的结果

function callBack( ){
    console. log( '执行callBack>>>')
}
function fun(cb){
    cb()
}
fun(callBack)

异步与同步任务

同步操作：当一个操作开始执行后，主程序需等待它的完成，才能继续向下执行。

异步操作：当一个操作开始执行后，主程序无需等待它的完成，可以继续向下执行。此时该操作可以跟主程序同时（并发）执行。

let data // 接收响应结果变量
let xhr = new XMLHttpRequest()

xhr.open('get','http://10.7.162.150:8089/api/shop/list')
xhr.send() // 启动异步
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            // console.log('结果 ',xhr.responseText);
            data = xhr.responseText
	console.log('data 1111 ',data)
        }
    }
}

console.log('data ',data)

跨越及解决方案

同源策略

什么是跨域

跨越解决方案

回调函数

异步与同步任务