跨域

什么是跨域

    请求所在服务器，与要被请求的服务器
    
    两个服务器地址
        协议： http/https
        域名： localhost/www.baidu.com/www.juejin.cn
        端口号： 0~65535
    上述的三个，有一个不同，就会触发跨域，上边的就是我们浏览器的同源策略
        只要违反了同源策略一定会触发跨域

跨域会导致什么情况发生

    请求能够正常的发送成功
    服务器也一定能够正常的响应成功
    但是浏览器会认为 当前的请求不安全，然后将本次请求的信息拦截掉
    所以最终的结果是
        前端能够正常的发送出去请求
        服务器能够正常的响应数据
        但是前端不能正常的接收数据，因为被浏览器拦截了 

解决跨域的三种方式

   1. jsonp
   2. cors
   3. proxy 服务器代理

jsonp 解决方案

    <script src='/static/js/index.js'></script>
    script 的 src 属性 会将地址中的文件内容读取一遍，
            然后将 文件的内容当成 JS 代码执行一遍
    <script src="http://localhost:8081/api"></script>
    目前我们的这个写法其实就是利用了 jsonp 解决了 跨域
    
    因为同源策略是浏览器用来限制 ajax 的
    
    script 标签的 src 属性，不会受到限制，所以可以跳出同源策略
    但是当前的解决方案也不是特别完美，因为目前的 jsonp 只能处理 get 方式的跨域，post 方式
    无法解决

cors 解决方案

    使用之前先执行命令 npm i cors  确保已经安装上
    
    出现跨域的流程
        1.前端发送请求（发送成功）
        2.后端反馈响应（反馈成功）
        3.浏览器解析后端数据（此时发现当时的请求违反了 同源策略，所以触发了跨域，将后端反馈
        的数据浏览器拦截掉）
        4.现在前端没有办法正常的接收到后端的数据
    cors 解决跨域的思路
        1.前端发送请求（发送成功）
        2.后端反馈响应（反馈成功）  但是在反馈的时候告诉浏览器我们这次通讯是合法的不要拦截
        3.浏览器解析后端反馈的数据（此时发现了当前的请求违反了 同源策略，但是后端告诉我们
        当前的请求时合法的，所以不触发跨域，正常给前端反馈数据）
        4.前端此时正常接收到数据了
    再接口处理的响应报文函数中 
        res.setHeader(
            "Access-Control-Allow-Headers",
            "Content-Type, X-Custom-Header"
        ); // 允许所有跨域网站的响应值
        res.setHeader("Access-Control-Allow-Methods", "POST, GET"); // 允许这四个方法
        res.setHeader("Access-Control-Allow-Methods", "*"); // 允许所有方法
    

proxy 服务器代理

    字面意思可以理解为中间商，开启代理，原理就是在本地创建一个虚拟服务器，发送请求数据，
    同时接受请求的数据，利用服务器与服务器间，交互，不会有跨域问题，也是完全只靠前端
    自己独立解决跨域的方式。