利用IDEA实现跨域利用jsonp和cors解决,我不想用WampServer哈哈

理解跨域

从一个站点访问一个资源,然后在这个资源当中又去访问另外的一个站点的资源,这个就是跨域。(域名,协议,端口三者有一个不一样就是跨域)
例如http://www.example.com/

http://api.example.com/detail.html不同源域名不同
https//www.example.com/detail.html不同源协议不同
http://www.example.com:8080/detail.html不同源端口不同
http://api.example.com:8080/detail.html不同源域名、端口不同
https://api.example.com/detail.html不同源协议、域名不同
https://www.example.com:8080/detail.html不同源端口、协议不同
http://www.example.com/detail/index.html同源只是目录不同

利用IDEA,tomcat部署项目

IDEA与tomacat集成,配置两个tomcat不同端口,记得在apche/conf/server.xml文件中修改
成功如图
在这里插入图片描述
采用多线程同时启动两个tomcat
在这里插入图片描述

在这里插入图片描述

利用jsonp跨域

  1. 其本质是利用了标签具有可跨域的特性,由服务端返回一个预先定义好的Javascript函数的调用,并且将服务器数据以该函数参数的形式传递过来,此方法需要前后端配合完成。
  2. jQuery 的$.ajax() 方法当中集成了JSONP的实现,可以非常方便的实现跨域数据的访问。

案例 jsonp 实现360 搜索案例

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201013000301510.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg==,size_16,color_FFFFFF,t_70#pic_cente

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>360 搜索</title>
    <style>
         *{
               margin: 0;
             padding: 0;
         }
         li{
             list-style: none;
         }
    </style>
    <script src="../jquery/template-native.js"></script>
</head>
<body>
<div>
<input type="text" id="keyword"><input type="button" value="开课吧一下">
        <div>
            <ul>

            </ul>
        </div>
</div>

<script type="text/template" id="templateId">
    <%for(var i=0;i<result.length;i++){%>
        <li><%=result[i].word%></li>
    <%}%>
</script>

<script>
    function getInfo(obj){
          var html=template("templateId",obj);

           document.querySelector("ul").innerHTML=html;
    }
    document.querySelector("input[type=text]").onkeyup=function(){

            
               // getInfo is not defined
               var keyword=this.value;
               if(keyword){
                      var script=document.createElement("script");
                      script.src="https://sug.so.360.cn/suggest?callback=getInfo&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word="+keyword;
                      document.body.appendChild(script);
               }
        }
</script>

</body>
</html>

利用cors跨域(跨域资源共享)

跨域资源共享,它的原理就是在请求服务器的时候,服务器给一个响应头,告诉客户端,这些数据可以访问.

通过想客户端输出一个响应头
header("Access-Control-Allow-Origin:*");  跨域资源共享

这种方式是服务器直接可一个给定一个响应头Access-Control-Allow-Origin,告诉客户端浏览器,这些数据可以获取。这个Access-Control-Allow-Origin也是属于http 协议规定的.

请求端口:8080

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript">
      function jsonp_fun(){
        $.ajax({
          url:'http://localhost:8888?params=fromjsonp&callback=getResult',
          type:'post',
          dataType:'text',
          success:function(data){
            console.log(data);
          }
        });
      }
      function getResult(data){
        alert(data.result);
      }
    </script>
  </head>
  <body>
  <input type="button" value="jsonp" onclick="jsonp_fun()"/>
  </body>
</html>

被请求的端口:8888

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="./js/jquery.min.js"></script>
  </head>
  <body>
  <%
    response.setHeader("Access-Control-Allow-Origin","http://localhost:8080");
    response.setHeader("Access-Control-Allow-Methods","GET,POST,PUT,OPTIONS");
    response.setHeader("Access-Control-Allow-Credentials","true");
  %>
  <%
    String params = request.getParameter("params");
    String callback = request.getParameter("callback");
    // 经过该接口一系列操作,然后得到data,将data返回给调用者
    String data = "{'result':'"+params+"'}";
    out.println(callback + "("+data+")");
  %>
  cor coming
  </body>
</html>

jsonp 与 cors 的区别

  1. jsonp 是最早期的这种跨域解决方案,因为是使用script 标签发送请求,所以兼容性会比较好,只支持get 方式.

  2. cors 是后期的一种解决方案. 它只需要改服务器的配置,客户端不需要做任何的处理。一个响应. ,兼容性稍微差一些,因为Access-Control-Allow-Origin 是后期http 协议规定的,如果浏览器不支持这个响应头,支持get ,以及post。

  3. 其它方式: 通过后台服务器转发,通过设置代理服务器。(例如Nginx代理)
    Nginx代理服务器

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值