跨域解决方案CORS

简介: 跨域解决方案CORS

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。


它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。


请求过程如下图:


20201102223605432.png


Preflight Request:

20201102223635553.png


然后服务器端给我们返回一个Preflight Response

20201102223639639.png


具体实现:


前端js中:

 //添加购物车
    $scope.addToCart=function () {
        //'withCredentials':true 实现跨域请求
        $http.get('http://localhost:9108/cart/addGoodsToCartList.do?itemId='
            +$scope.sku.id+'&num='+$scope.num,{'withCredentials':true}).success(function (response) {
            if (response.success){
                location = 'http://localhost:9108/cart.html';
            }else {
                alert(response.message);
            }
        })
    };


后端控制层:


一、使用代码实现:



 @RequestMapping("/addGoodsToCartList")
public Result addGoodsToCartList(HttpServletRequest request,HttpServletResponse response,Long itemId,Integer num){
        //接收跨域请求
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:9105");
        response.setHeader("Access-Control-Allow-Credentials", "true");
    ......
}


注:

Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。

他是通过服务器端返回带有Access-Control-Allow-Origin标识的Response header,用来解决资源的跨域权限问题。


二、使用注解实现:



@CrossOrigin(origins = "http://localhost:9105",allowCredentials = "true")
@RequestMapping("/addGoodsToCartList")
public Result addGoodsToCartList(HttpServletRequest request,HttpServletResponse response,Long itemId,Integer num){
      ......
}


注:

springMVC的版本在4.2或以上版本,可以使用注解实现跨域。

allowCredentials=“true” 可以缺省。

相关文章
|
2月前
|
存储 缓存 安全
oss跨域资源共享(CORS Configuration)
oss跨域资源共享(CORS Configuration)
55 4
|
1天前
|
缓存 前端开发 安全
Python web框架fastapi中间件的使用,CORS跨域详解
Python web框架fastapi中间件的使用,CORS跨域详解
|
8天前
|
JavaScript 前端开发 安全
JavaScript中跨域资源共享(CORS):原理和解决方案
【4月更文挑战第22天】本文介绍了JavaScript中跨域资源共享(CORS)的原理和解决方案。CORS借助HTTP头部字段允许跨域请求,核心是Access-Control-Allow-Origin响应头。解决方案包括:服务器端设置响应头(如使用Express.js的cors中间件)、使用代理服务器或JSONP。现代Web开发推荐使用CORS,因为它更安全、灵活,而JSONP已逐渐被淘汰。理解并正确实施CORS能提升Web应用性能和安全性。
|
2月前
|
缓存 安全 数据安全/隐私保护
在智能媒体服务中,跨域问题可以通过设置CORS(跨源资源共享)规则来解决
在智能媒体服务中,跨域问题可以通过设置CORS(跨源资源共享)规则来解决
19 4
|
2月前
|
JavaScript 安全 前端开发
js开发:请解释什么是跨域请求(CORS),以及如何解决跨域问题。
CORS是一种W3C标准,用于解决浏览器同源策略导致的跨域数据访问限制。它通过服务器在HTTP响应头添加标志允许特定源进行跨域请求。简单请求无需预检,而预检请求(OPTIONS)用于询问服务器是否接受非简单请求。服务器端配置响应头如`Access-Control-Allow-Origin`等实现CORS策略,客户端JavaScript则正常发起请求。若配置不当,浏览器将阻止跨域访问,保障安全。
24 2
|
2月前
|
前端开发 安全 开发者
前端开发中的跨域资源共享(CORS)问题及解决方案探讨
在前端开发中,跨域资源共享(CORS)是一个常见且重要的问题。本文将深入探讨CORS的原理、影响以及解决方案,帮助开发者更好地应对跨域请求问题。
|
3月前
|
前端开发 API 数据安全/隐私保护
Web前端开发中的跨域资源共享(CORS)解决方案
【2月更文挑战第5天】在Web前端开发中,跨域资源共享(CORS)是一个常见的挑战。本文将探讨CORS的概念和原理,并介绍一些常用的解决方案,包括服务器端配置和前端处理方法,帮助开发者更好地应对跨域请求问题。
117 4
|
3月前
|
前端开发 开发者
前端开发中的跨域资源共享(CORS)解决方案探讨
【2月更文挑战第2天】跨域资源共享(CORS)是前端开发中常见的问题,本文将深入探讨CORS的原理及解决方案,包括简单请求、预检请求以及常用的CORS解决方案,为前端开发者提供深入的理解和应对CORS问题的有效方法。
39 1
|
3月前
|
Java
springboot+cors跨域处理
springboot+cors跨域处理
26 0
|
3月前
|
前端开发 JavaScript API
探索前端开发中的跨域资源共享(CORS)
【2月更文挑战第3天】在前端开发中,跨域资源共享(CORS)是一个至关重要的话题。本文将深入探讨CORS的概念、工作原理以及如何在前端项目中正确配置和处理跨域请求,帮助开发者更好地理解和应用CORS技术。
29 7