闭关修炼（二十四）浅入了解跨域问题

最新推荐文章于 2024-07-06 09:00:00 发布
最新推荐文章于 2024-07-06 09:00:00 发布
阅读量206 收藏
点赞数
分类专栏： java闭关修炼
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19841133/article/details/113136096
版权

本来想说是深入研究一下，但是水平有限，也就是手放在水面往下多0.25厘米的深度的样子
，掠于皮毛。

文章目录

什么是跨域问题

跨域其实是浏览器的一个安全机制，请求访问域名与AJAX请求地址不一致，浏览器会无法返回请求结果。

具体的例子，现在我在浏览器访问url地址www.aaa.com/a，而这个页面后台服务器又发送请求给www.bbbb.com/b，因为浏览器跨域安全机制，阻止你的访问。

跨域问题模拟

我们先配置一下host，添加两个自定义的域名便于我们测试
在这里插入图片描述

a web项目创建一个测试servlet，把tomcat启动起来

@WebServlet("/test")
public class TestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("name");
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("username", username);
        resp.getWriter().write(jsonObject.toJSONString());
    }
}

b web项目的index.jsp访问a的测试接口

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>

  <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function (){
      $.ajax({
        type : "GET",
        async : false,
        url : "http://a.a.com:8080/biguanxiulian_2_war_exploded/test?username=123",
        dataType : "json",
        success : function (data){
          alert(data["username"])
        },
        error : function (){
          alert("fail")
        }
      })
    })
  </script>
  <body>
  </body>
</html>

访问b web项目的index.jsp，就会报跨域错误
在这里插入图片描述
在这里插入图片描述
这是因为AJAX请求的域名和我当前访问的域名是不一致的，浏览器默认不会获取ajax结果。

浏览器默认网站ajax请求是在同一个域名下的。这是浏览器的机制。

跨域问题如何解决

使用jsonP 只支持get请求，不支持post

使用接口网关 ，springcloud （企业开发常用）

httpclient 内部转发

response添加header请求头允许跨域。

但是我水平有限，springcloud先放一放

先说一下几种方法

response添加请求头解决跨域问题

在a web项目中加多一段代码

resp.setHeader("Access-Control-Allow-Origin", "*");


@WebServlet("/test")
public class TestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("username", username);
        resp.getWriter().write(jsonObject.toJSONString());
        // 允许浏览器跨域访问，*允许所有
        resp.setHeader("Access-Control-Allow-Origin", "*");
    }
}

b网站重新访问，正常返回结果
在这里插入图片描述

jsonp解决跨域问题

JSONP使用在前端中的

JSON只支持GET，也不怎么好用

修改ajax代码，dataType改为jsonp，加一行jsonp: “jsonpCallback”

<script type="text/javascript">
    $(document).ready(function (){
      $.ajax({
        type : "GET",
        async : false,
        url : "http://a.a.com:8080/biguanxiulian_2_war_exploded/test?username=123",
        dataType : "jsonp",
        jsonp: "jsonpCallback",// 服务器端用于接收回调的func参数
        success : function (data){
          alert(data["username"])
        },
        error : function (){
          alert("fail")
        }
      })
    })
  </script>

服务器端修改，获取jsonpCallback参数，构造String返回结果，jsonpCallback + ( + 返回内容 + )

@WebServlet("/test")
public class TestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("username", username);

        String jsonpCallback = req.getParameter("jsonpCallback");
        System.out.println(jsonpCallback);

        resp.getWriter().println(
                String
                .format("%s(%s)",
                        jsonpCallback,
                        jsonObject.toJSONString()));

        //resp.setHeader("Access-Control-Allow-Origin", "*");
    }
}

查看结果，访问url后面带有jsonpCallback参数，这个参数是客户端生成出来的，访问的时候jsonpCallback的值帮我们自动构造了。对应jsonp: “jsonpCallback”
在这里插入图片描述
响应结果
在这里插入图片描述
在这里插入图片描述
原理是什么呢？

使用script发送get请求，我们在引用jquery.min.js的时候用的就是script请求，它是能跨越获取结果的，jsonp用这个这个方法发送请求，回调参数，将参数解析，获取取结果。

这里参数回调结果是
jsonpCallback=jQuery17206283321772985047_1611579842743&_=1611579842749

解析参数，就取得了服务器发送的结果
&_=1611579842749 -> username: “123”

注意类型是script类型的
在这里插入图片描述

jsonp是不支持post的，我们可以测试一下

@WebServlet("/test")
public class TestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("调用了GET");
        //String username = req.getParameter("username");
        //JSONObject jsonObject = new JSONObject();
        //jsonObject.put("username", username);
        //
        //String jsonpCallback = req.getParameter("jsonpCallback");
        //System.out.println(jsonpCallback);
        //
        //resp.getWriter().write(
        //        String
        //        .format("%s(%s)",
        //                jsonpCallback,
        //                jsonObject.toJSONString()));

        //resp.setHeader("Access-Control-Allow-Origin", "*");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("调用了POST");
        String username = req.getParameter("username");
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("username", username);

        String jsonpCallback = req.getParameter("jsonpCallback");
        System.out.println(jsonpCallback);

        resp.getWriter().write(
                String
                        .format("%s(%s)",
                                jsonpCallback,
                                jsonObject.toJSONString()));
    }
}

把前端代码改成POST请求，访问测试，alert了fail，但是返回200，请求方式自动变成了GET
在这里插入图片描述

代码明明请求方式写的是post的
在这里插入图片描述
服务器后台打印，完全没有走post的方法
在这里插入图片描述
所以jsonp不支持post

httpclient内部转发解决跨域问题

b项目内部发送httpclient给a项目

b项目引入httpclient jar包

		<dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.5.2</version>
        </dependency>

写httpclient转发

@WebServlet("/ForwardToAServerServlet")
public class ForwardToAServerServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 创建默认连接
        CloseableHttpClient httpClient = HttpClients.createDefault();

        // 创建get连接
        HttpGet httpGet = new HttpGet("http://a.a.com:8080/biguanxiulian_2_war_exploded/test?username=123");
        // 执行访问
        CloseableHttpResponse closeableHttpResponse = httpClient.execute(httpGet);

        // 获取状态码
        int code = closeableHttpResponse.getStatusLine().getStatusCode();

        // 获取状态
        System.out.println("code:" + code);

        if (code == 200) {
            resp.getWriter().write(
                    EntityUtils
                            .toString(closeableHttpResponse.getEntity()));
        }

        // 关闭连接
        closeableHttpResponse.close();
        httpClient.close();
    }
}

访问ForwardToAServerServlet接口，是经由httpclient调用接口获取的结果
在这里插入图片描述
那修改index.jsp，访问自己的ForwardToAServerServlet接口就行了，成功的绕过了浏览器的跨域检测

<html>
  <head>
    <title>$Title$</title>
  </head>

  <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function (){
      $.ajax({
        type : "get",
        async : false,
        url : "http://b.b.com:8081/javaWEBquick_war_exploded//ForwardToAServerServlet",
        dataType : "json",
        //jsonp: "jsonpCallback",// 服务器端用于接收回调的func参数
        success : function (data){
          alert(data["username"])
        },
        error : function (){
          alert("fail")
        }
      })
    })
  </script>
  <body>
  </body>
</html>

成功解决跨域问题
在这里插入图片描述
使用httpclient的缺点是效率点，有点类似重定向，做了两次请求。

这种方法最大好处是十分安全，抓包无法分析你真正调用的接口，访问接口的请求隐藏在了httpclient转发中，类似加了层壳。

写在后面

其实在项目中都不用这些办法解决跨域问题。

小demo中快速解决跨域，可以用用。

项目一般使用网关接口，搭建api接口网关，那么原理是什么呢？

服务器搭建nginx，服务器部署了多个不同的项目，客户端访问nginx服务器，nginx判断项目名称转发客户端的访问。

这样做的好处是：客户端都访问一个域名，而跨域的工作交给nginx服务器去转发。

likeGhee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
跨域问题
qq_3316359388的博客
04-09 463
1.跨域原因 当浏览器访问 www.a.com时，tomcat1给返回一个js，用户看不到。这个js通过ajax去调用另一个服务tomcat2，如果能够调的通，那么就危险了。 所以 w3c标准不允许。当ajax调用www.b.com时，请求头里会放置一个变量。tomcat2检测到$http_origin 中的变量 即 原网址是否是本服务，如果不是，则拒绝该访问。 2.如何跨域 常见的跨域方案： jsonp、 document.domain + iframe 跨域 Cors解决方案（最优雅） 添加hea
跨域问题（CORS / Access-Control-Allow-Origin）
xcbeyond|疯狂源自梦想，技术成就辉煌
11-24 11万+
1、前言 最近在项目中，调用Eureka REST接口时，出现了CORS跨越问题（Cross-origin resource sharing），在此与大家进行分享，避免多走些弯路。 项目前端（http://localhost:9000）通过Ajax方式调用Eureka REST 接口（http://localhost:8761/eureka/apps）时，却没有任何反应...
什么是跨域？——详解跨域问题及其解决方案
最新发布
fudaihb的博客
07-06 3459
跨域问题是Web开发中常见且令人困扰的问题之一。理解跨域的原理及其解决方案对于前后端分离开发尤为重要。本文将详细介绍跨域的概念、产生原因、常见的跨域解决方案，并提供详细的代码示例，帮助读者深入理解跨域问题及其应对方法。
什么是跨域？怎么解决跨域问题？
热门推荐
L瑜
06-15 27万+
什么是跨域？ 跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。 所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子： http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域） http://www.123.com
GeoServer跨域问题.zip
10-21
在Web应用开发中，跨域问题是一个常见的挑战，特别是在利用Ajax进行异步数据交互时。由于浏览器的安全策略，不同源（域名、协议或端口）之间的请求会被阻止，除非服务器允许这些跨域请求。在GeoServer的环境中，当...
Java服务器端跨域问题解决方案
08-25
Java服务器端跨域问题解决方案 Java 服务器端跨域问题解决方案是指在 Java 服务器端如何解决跨域问题的解决方案。跨域问题是指在 Ajax 请求中，因为安全限制，浏览器不能将数据发送到不同源（domain、protocol 或 ...
nginx跨域问题，解决多端口，多ip问题
03-26
Nginx 跨域问题解决方案 Nginx 是一个流行的开源 Web 服务器软件，广泛应用于 Web 服务器管理。然而，在使用 Nginx 进行服务器管理时，...通过本文档，可以了解 Nginx 跨域问题的解决方法，并且可以应用于实际项目中。
springboot后端解决跨域问题
08-26
Spring Boot解决跨域问题 在今天的文章中，我们将讨论如何使用Spring Boot解决跨域问题。跨域问题是一个常见的安全问题，它是由浏览器的同源策略造成的，即浏览器不能执行其他网站的脚本。 什么是跨域？ 跨域是...
springboot跨域问题解决方案
08-25
Spring Boot 跨域问题解决方案 Spring Boot 跨域问题是指在不同的源（origin）之间请求资源时出现的安全限制问题。这种限制是为了防止恶意脚本攻击，保护用户的隐私和安全。下面我们将详细介绍 Spring Boot 跨域...
什么是跨域？如何解决跨域问题？
飞扬_柳絮的专栏
07-31 12万+
什么是跨域？ 浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域 域名： 主域名不同 http://www.baidu.com/index.html –&amp;gt;http://www.sina.com/test.js 子域名不同 http://www.666.baidu.com/index.html –&amp;gt;http://www.555.baidu.co...
跨域问题（1）
pingting_的博客
01-11 228
跨域问题（1）CORS跨域资源共享1.跨域问题常用解决方案2.在express框架中使用cors中间件解决跨域问题3.CORS相关概念4.使用注意事项5.CORS响应头部5.1Access-Control-Allow-Origin5.2Access-Control-Allow-Header5.3Access-Control-Allow-Methods6.CORS请求分类6.1简单请求6.2预检请求JSONP解决跨域资源共享1.JSONP相关知识点产生：概念：特点：2.使用 `jQuery` 发起 `JSON
HTTP跨域问题
wcz的博客
09-20 521
跨域问题产生的原因 浏览器的同源策略 解决方法 1、jsonp
什么是跨域问题
weixin_43902063的博客
08-24 577
在浏览器端进行 Ajax 请求时会出现跨域问题，那么什么是跨域，如何解决跨域呢？先看浏览器端出现跨域问题的现象，如下图所示 什么是同源？ 所谓同源是指，域名，协议，端口均相同 http://www.funtl.com --> http://admin.funtl.com 跨域 http://www.funtl.com --> http://www.funtl.com 非跨域 http://www.funtl.com --> http://www.funtl.com:8080 跨域 http
axios 跨域问题
09-29
跨域问题是指当一个请求的协议、域名、端口与当前页面的URL不同，就会发生跨域。在Vue中使用Axios解决跨域问题可以通过设置代理来实现。在Nuxt中使用Axios解决跨域问题需要安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块，并进行相应的配置。同时，可以通过简单发起一个请求来验证跨域问题是否解决。 下面是解决跨域问题的步骤： 1. 在Vue中使用Axios解决跨域问题： - 引入Axios库：首先，需要在项目中引入Axios库。 - 配置代理：在项目的配置文件中设置代理，将请求转发到目标服务器，以解决跨域问题。 2. 在Nuxt中使用Axios解决跨域问题： - 安装依赖：使用命令行工具安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块。 - 配置代理：在Nuxt的配置文件中设置代理，将请求转发到目标服务器，以解决跨域问题。 3. 简单发起一个请求：在代码中使用Axios发起一个请求，可以使用高德地图提供的天气接口来测试跨域是否解决。 请注意，以上是解决跨域问题的一般步骤，具体的实现方式可能会因项目环境的不同而有所差异。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值