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

最新推荐文章于 2024-01-02 15:54:37 发布

美式因子

最新推荐文章于 2024-01-02 15:54:37 发布

阅读量705

点赞数

分类专栏： vue 文章标签： jsonp ajax tomcat http

本文链接：https://blog.csdn.net/weixin_45511236/article/details/109039598

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

跨域

理解跨域
利用IDEA，tomcat部署项目
利用jsonp跨域
- 案例 jsonp 实现360 搜索案例
利用cors跨域（跨域资源共享）
jsonp 与 cors 的区别

理解跨域

从一个站点访问一个资源，然后在这个资源当中又去访问另外的一个站点的资源，这个就是跨域。(域名，协议，端口三者有一个不一样就是跨域）
例如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跨域

其本质是利用了标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。
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 的区别

jsonp 是最早期的这种跨域解决方案，因为是使用script 标签发送请求，所以兼容性会比较好，只支持get 方式.
cors 是后期的一种解决方案. 它只需要改服务器的配置，客户端不需要做任何的处理。一个响应. ,兼容性稍微差一些，因为Access-Control-Allow-Origin 是后期http 协议规定的，如果浏览器不支持这个响应头,支持get ，以及post。
其它方式: 通过后台服务器转发，通过设置代理服务器。（例如Nginx代理）
Nginx代理服务器

美式因子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用IDEA实现跨域利用jsonp和cors解决，我不想用WampServer哈哈

跨域理解跨域利用IDEA，tomcat部署项目利用jsonp跨域案例 jsonp 实现360 搜索案例利用cors跨域（跨域资源共享）jsonp 与 cors 的区别理解跨域从一个站点访问一个资源，然后在这个资源当中又去访问另外的一个站点的资源，这个就是跨域。(域名，协议，端口三者有一个不一样就是跨域）例如http://www.example.com/http://api.example.com/detail.html不同源域名不同https//www.example.com/
复制链接

扫一扫

专栏目录