ajax跨域问题分析与springboot解决方法
前后端分离
作者：原罪0728
作用：模拟一个默认在5500端口的本地服务
$.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);
作者：原罪0728
相关文章
Camille
2020-07-24
Serwa
2020-03-20
Vivienne
2021-07-20
Pelagia
2021-04-30
Hester
2023-07-22
Grace
2023-07-22
Vanna
2023-07-22
Peony
2023-07-22
Dorothy
2023-07-22
Dulcea
2023-07-22
Jamina
2023-07-22
Zandra
2023-07-22
Serafina
2023-07-24
Kathy
2023-08-08
Olivia
2023-08-08
Elina
2023-08-08
Jacinthe
2023-08-08
Viridis
2023-08-08
Hana
2023-08-08