前后端交互—跨越和CORS、jsonp的使用和封装

跨域：

触发跨越：

1. 当没有遵守同源策略时，Ajax请求会报错：请求的资源上不存在访问控制允许源
2. 没有遵守同源策略时，浏览器不允许ajax请求没有明确允许访问的跨越资源请求

同源策略：同协议、同域名、同端口

解决跨越问题的方案：

1. 不使用Ajax（使用jsonp）
2. 后端服务器设置明确允许（CORS跨越）
3. 使用服务器代理

jsonp

jsonp的原理：利用script标签不会触发浏览器的同源策略，及script标签将自身引用的数据作为js代码执行的原理，配合函数的传参（执行时的参数发送给定义时的参数）实现跨越数据资源获取

jsonp的封装：

function jsonp(url, callback, data){
        // 1. 处理数据
        data = data || {};
        var str = "";
        for(var i in data){
            str += `${i}=${data[i]}&`;
        }
        url = url + "?" + str + "__qft__=" + Date.now();

        // 2. 创建script标签
        var script = document.createElement("script");
        script.src = url;
        document.body.appendChild(script);

        // 3. 在局部作用于定义全局函数
        // var a = data.cn;
        // var b = data[a];
        // window[b]

        window[data[data.cn]] = function(res){
            callback(res);
        }
    }

jsonp、post、get三合一封装：

function request(ops){
        let {
            type="get",
            url,
            data={},
            success,
            error,
            timeout=1000,
            async=true
        } = ops;

        // 1. 处理数据
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`;
        }

        // 2. 拼接url
        if(type !== "post"){
            url = url + "?" + str + "__qft__=" + Date.now();
        }

        // 12. 所有请求的超时设置
        // 注意：因为函数中存在return，又需要保证当前超时的延时器，必须执行，所以将延时器代码放在此处
        setTimeout(() => {
            // 13. 超时算是失败状态的一种
            error && error("timeout");
            success = null;
            error = null;
        }, timeout);

        // 3. 创建xhr对象
        let xhr;
        if(type !== "jsonp"){
            xhr = new XMLHttpRequest();
            // 4. 让open的参数，找函数的参数
            xhr.open(type, url, async);
            xhr.onload = function(){
                if(xhr.status === 200){
                    // 5. ajax的请求成功
                    success && success(xhr.responseText);
                    success = null;
                    error = null;
                }else{
                    // 6. ajax的请求失败
                    error && error(xhr.status);
                    success = null;
                    error = null;
                }
            }
            // xhr.onreadystatechange = function(){
            //     if(xhr.readyState === 4 && xhr.status === 200){
            //         success(xhr.responseText);
            //     }else if(xhr.readyState === 4&& xhr.status !== 200){
            //         error(xhr.status);
            //     }
            // }

            // 7. get和post分别处理ajax的send
            if(type === "get"){
                xhr.send()
            }else{
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send(str.slice(0,str.length-1));
            }
            // 8. 如何type的值不是jsonp，那么到此结束
            return ;
        }

        // 9. 如何type的值是jsonp，以上的if不会执行，程序还在继续
        // 创建script标签
        let script = document.createElement("script");
        script.src = url;
        document.body.appendChild(script);

        // 10. 定义全局函数
        window[data[data.cn]] = function(res){
            // 11. jsonp的成功
            success && success(res);
            success = null;
            error = null;
        }
    }

注意：异步的程序，只要执行结束，立即确定一个且一种状态，其他状态都应该清空

CORS解决跨越：

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

/**
 * @author chenrui
 * @date 2019/3/12 14:09
 */
@Configuration
@SuppressWarnings("unused")
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 1允许任何域名使用
        corsConfiguration.addAllowedOrigin("*");
        // 2允许任何头
        corsConfiguration.addAllowedHeader("*");
        // 3.允许ajax异步请求带cookie信息
        corsConfiguration.setAllowCredentials(true);
        // 4允许任何方法（post、get等）
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}