1.问题描述
最近在公司项目中,使用dubbo
微服务框架开发,在多个项目之间相互调用的时候出现了ajax
跨域调用的问题,具体的问题就是,dubbo
多模块项目,不同的业务分别在不同的子项目中,比如订单相关的在order
模块中,商品相关的在product
模块中,那么在前端新增订单时候需要获取商品数据的时候用ajax
直接访问product
模块中相关的方法的时候就会报错,因为这时候order
和product
在本地的项目名和端口都是不同的,不能直接进行跨域访问。
2.问题分析
跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript
施加的安全限制。
同源:指的是域名、协议、端口都相同
在项目中,我在product
项目的地址是http://localhost:93/product-web
,order
项目的地址是http://localhost:94/order-web
属于跨域。
3.解决办法
跨域问题的解决方案有多种,本次采用的是后端服务开放跨域请求的方法。
结合具体项目,介绍解决方法。
后端开放跨域请求主要是拦截请求,给HTTP
请求添加Header
。具体代码如下
res.setHeader("Access-Control-Allow-Origin", req.getHeader("Origin"));
res.setHeader("Access-Control-Allow-Credentials", "true");
res.setHeader("Access-Control-Allow-Headers", "accept,content-type,x-requested-with,Origin");
res.setHeader("Access-Control-Allow-Methods", "OPTIONS,GET,POST,DELETE,PUT");
一般设置好就可以正常访问了,但是我测试的出现下面问题
调用报错.png
实际上是由于请求没有携带cookie
信息导致的后台逻辑没有走通(单一登录根据cookie验证是否登录)
非同源请求默认不携带cookie
信息的,如果想要请求中携带cookie
信息,需要在ajax
请求中添加以下参数
$.ajax({
type: "POST",
url: "${ctxOrderUrl}/loginPurchase/getUnit",
async: false,
xhrFields:{
withCredentials:true
},
success: function (result) {
}
});
这时候请求就不会有问题了。
网友评论