【实战经验】ajax跨域处理其它解决方案二

最新推荐文章于 2024-04-13 18:12:53 发布

haibo_bear

最新推荐文章于 2024-04-13 18:12:53 发布

阅读量414

点赞数

分类专栏： java 文章标签：跨域 ajax

本文链接：https://blog.csdn.net/haibo_bear/article/details/83932251

版权

前言：

一般情况下可以选择方案一，采用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>

仅仅修改前端代码发现效果如下：

理论上讲控制台应该控制台有报错的。（实际上，我也没看到报错，如下图）

最低0.47元/天解锁文章

haibo_bear

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【实战经验】ajax跨域处理其它解决方案二

前言：一般情况下可以选择方案一，采用Nginx转发，隐藏跨域。正文：一、跨域问题举例见方案一知识点：1、跨域问题产生原因：前台做的校验，与后台系统无关。即后台默认情况下不限制域名+端口号来自哪的请求，正常返回。2、跨域问题产生限制：跨域请求访问类型为xhr才会提醒跨域。如下图。二、其它解决方案一（前台解决）最简单的解决方案，修改本地浏览器（简而言之，就是...
复制链接

扫一扫

专栏目录