前后端分离

ajax

VsCode 插件

作用：模拟一个默认在5500端口的本地服务

jq ajax主要参数

$.ajax({
    //请求方式
    type:'POST',
    //发送请求的地址
    url:'fzz.php',
    //服务器返回的数据类型
    dataType:'json',
    //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
    data:{name:xxx,age:xxx},
    success:function(data){
        //请求成功函数内容
    },
    error:function(jqXHR){
        //请求失败函数内容
    }
});

ajax跨域问题

http://www.ruanyifeng.com/blog/2016/04/cors.html

ajax跨域问题解决

已springboot为例：

1.注解形式允许跨域

@CrossOrigin(origins = "http://127.0.0.1:5500")

2.配置形式允许跨域

@Configuration
public class CorsConfig {

    public CorsConfig(){

    }

    @Bean
    public CorsFilter corsFilter(){
        //1.添加cors配置信息
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("http://127.0.0.1:5500");
        //设置是否发送cookie信息
        config.setAllowCredentials(true);
        //设置允许请求的方式
        config.addAllowedMethod("*");
        //设置允许的header
        config.addAllowedHeader("*");

        //2.为url添加映射路径
        UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
        corsSource.registerCorsConfiguration("/**",config);

        //3.返回重新定义好的corsSource
        return new CorsFilter(corsSource);
    }
}

3.还有很多其他的方式不一一距离原理一样，包括不同语言不同框架的具体实现方式也不一一举例 可以自行百度 有问题再问

ajax跨域复杂请求(cookie，session)

如果要使用cookie，session等需要开启允许复杂请求

例子：

$.ajax({
    type:"POST",
    xhrFields:{
        withCredentials: true
    },
    url: "http://127.0.0.1:8080/login",
    contentType:"application/json",
    data: JSON.stringify(data),
    success: function(data){
        console.log(data)
        if(data.result == "success"){
            location.href = "index.html";
        }
    },
})

xhrFields:{
    withCredentials: true
},

作用：允许复杂请求 ，相同的也要在服务端允许 参考上面（具体其他语言框架实现自行百度，有问题再问）

//设置是否发送cookie信息
config.setAllowCredentials(true);