前言:
一般情况下可以选择方案一,采用Nginx转发,隐藏跨域。
正文:
一、跨域问题举例见方案一
知识点:
1、跨域问题产生原因:
前台做的校验,与后台系统无关。即后台默认情况下不限制域名+端口号来自哪的请求,正常返回。
2、跨域问题产生限制:
跨域请求访问类型为xhr才会提醒跨域。如下图。
二、其它解决方案一(前台解决)
最简单的解决方案,修改本地浏览器(简而言之,就是欺骗自己),使不拦截跨域请求。
一开始我以为这种方案没用,直到有一天我们前端同事说他用了一个新框架,通过node.js搭建一个前端框架blabla,然后前端本地起了一个前端服务(8081服务)。本来好好地都是同域名下同端口号(8080服务)的请求,现在静态资源、css、js等都因此放在前端服务(8081服务)里,而实际访问请求在后端服务(8080服务)。然后,他每次修改后,都会跨域访问,因为前后端端口不同。
网上给的推荐答案就是一个命令行(Mac如下修改myName为自己的电脑用户名),打开一个自定义配置的浏览器。
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security
--user-data-dir=/Users/myName/Documents/MyChromeDevUserData/
此处有坑。这个--user-data-dir指向的目录最末尾的文件夹是需要自己mkdir的。
三、其它解决方案二(访问类型xhr改为jsonP解决方案)
1、修改前端代码:
jump.js新增代码:一定注意是GET请求!
function jsonpJump() {
$.ajax({
type: "get",
dataType:"jsonp",
url: "http://localhost:8081/a/helloDog",
jsonp:"callbackparm",
success: function(re){
// var result = JSON.parse(re);
console.log(re);
},
error: function(result){
console.log(result);
}
});
}
more.vm新增点击事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="${rc.contextPath}/b/js/jquery-1.7.1.min.js"></script>
</head>
<body>
<a href="#" onclick="more()">发生本域more请求</a>
<a href="#" onclick="jump()">发生跨域jump请求</a><br/>
<a href="#" onclick="jsonpJump()">跨域jsonp请求</a>
<script type="text/javascript" src="${rc.contextPath}/b/js/more/more.js"></script>
<script type="text/javascript" src="${rc.contextPath}/b/js/more/jump.js?20181110"></script>
</body>
</html>
仅仅修改前端代码发现效果如下:
理论上讲控制台应该控制台有报错的。(实际上,我也没看到报错,如下图)