浏览器跨域

跨域是浏览器的同源策略导致

        同源策略是浏览器的一种安全限制，指 https// -> 协议。 www.baidu.com -> 域名。  443 ->端口。必须一样才能进行资源的访问，且只对ajax进行限制， scritp、img、video、audio等带有src属性的标签不会有同源策略限制

当我们在浏览器访问一个地址如  https://www.baidu.com:443/inde.html 他会向服务器获取资源，展示页面。

如果该资源中ajax请求 ， 就会去调接口，接口地址只能是 https://www.baidu.com:443/ * 下面的资源，否则就会跨域。

当我们在浏览器访问的资源有调接口时，会向服务器发请求，服务器会返回资源（即使跨域资源是会返回的），只是被浏览器拦截了。

跨域解决方案 

前端：

       1.jsonp（已淘汰） 只能进行get请求，需要后端配合

         利用script标签不会跨域原理，在路径后拼接一个回调函数，后端拿到回调函数，并执行，在执行时传递参数

// 前端
<script type='text/javascript'>
window.jsonpCallback = function (res) {
  console.log(res)
}
</script>
<script src='http://localhost:8080/jsonp?callback=jsonpCallback' type='text/javascript'></script>

// 后端
app.get('/jsonp', (req, res) => {
    console.log(req.query);
    const funcName = req.query.callback  // 前端传递过来的回调函数
    const data = { name: 'zs', age: 22 }
    const scriptStr = `${funcName}(${JSON.stringify(data)})`    // 调用函数，并传递参数给前端
    res.send(scriptStr) // 响应
})

      2.devServer(proxy代理)        

     原理： 浏览器访问的地址是本地启动的devServer服务器，浏览器与本地的devServer服务器是同源的，所以不存在跨域，然后本地服务器再将这次请求转发到目标地址，服务器与服务器之间也不存在跨域。就能拿到数据

        注：devserver是本地服务器，线上没用。线上资源是部署在同一源下，所以不会跨域。如果不是部署在同一源下，只能后端解决

后端：cors (设置请求头 允许访问的源)

        res.setHeader("Access-Control-Allow-Origin","*")     //  * 是表示所有源，也能设置具体源 http://127.0.0.1:5500        

        服务端设置这段代码，浏览器就不会对该服务器响应的数据进行拦截。就能拿到数据