关于vue跨域请求JavaWeb的一种解决方式(包含响应自定义cookie)_vue中xhr.open('get', url, true)跨域怎么解决-优快云博客

本文介绍了如何在Vue应用中处理跨域请求，并在JavaWeb后端设置响应Header以允许携带跨域cookie。通过设置XMLHttpRequest的withCredentials属性为true，确保请求携带cookie。在Java后端，根据Origin header设置Access-Control-Allow-Origin，Access-Control-Allow-Credentials等，以允许特定域名的跨域访问，并处理预检请求。对于POST请求，可以使用@CrossOrigin注解简化配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步:vue中使用XMLHttpRequest请求方式
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, url);
xhr.withCredentials = true; // 允许携带跨域cookie,(ajax也可以设置该属性)
xhr.send();

第二步:在后端代码response中修改Header的属性
//跨域的时候get，post都会显示origin，同域的时候get不显示origin，post显示origin
String ip= request.getHeader(“Origin”);
if(origin!=null){
// 允许指定域访问跨域资源;此处也可以通过以下链接
// https://blog.youkuaiyun.com/java1703/article/details/88763594来获取ip
response.setHeader(“Access-Control-Allow-Origin”, ip );
}
// 允许客户端携带跨域cookie，此时origin值不能为“*”，只能为指定单一域名
response.setHeader(“Access-Control-Allow-Credentials”, “true”);
if(RequestMethod.OPTIONS.toString().equals(request.getMethod())) {
String allowMethod = request.getHeader(“Access-Control-Request-Method”);
// 这个是配置自定义header内的token appid之类的~~
String allowHeaders = request.getHeader(“x-requested-with,content-type,token”);
// 浏览器缓存预检请求结果时间,单位:秒
response.setHeader(“Access-Control-Max-Age”, “86400”);
// 允许浏览器在预检请求成功之后发送的实际请求方法名
response.setHeader(“Access-Control-Allow-Methods”, allowMethod);
// 允许浏览器发送的请求消息头
response.setHeader(“Access-Control-Allow-Headers”, allowHeaders);
}

注:以上是get请求,如果只是单纯post请求的话,只需要在java后台增加@CrossOrigin(origins="*", methods={RequestMethod.GET, RequestMethod.POST})注解即可,此方法可加在指定的controller上,也可加在指定方法上,具体使用详情请自行百度