18赞

深入浅析Jsonp解决ajax跨域问题

作者：无名有名我无名_593 | 2021-11-13 10:27

这篇文章主要介绍了深入浅析Jsonp解决ajax跨域问题的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

一、介绍

最近跨域问题比较多，而且自己刚好也看到这一块，就总结了一下，关于JSONP的东西百度的话东西确实很多，很多人都是复制别人的，如此下去，其实找的资料就那么几份，关键是我还看不懂，可能是能力问题吧，自己经过很多尝试，所以总结了一下，终究还是弄懂了皮毛。注意一点是，这里是用Jsonp解决ajax的跨域问题，具体的实现其实不是ajax。

1、同源策略

浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指，域名，协议，端口相同。不同源的客户端脚本(JavaScript、ActionScript)在没明确授权的情况下，不能读写对方的资源。

2、JSONP

JSONP（JSON with Padding）是JSON的一种”使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的script 元素是一个例外。利用

other（8888）项目中index.jsp如下：// 因为jsp实际就是servlet，这里就用jsp代替servlet演示。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>



Insert title here



other domain

其实中上面看无非就是jsonp页面中点击按钮ajax去获取other页面中的数据。

结果如下：chrome控制台

这里写图片描述

XMLHttpRequest cannot load http://localhost:8888/other/index.jsp. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

以上提示就是指跨域问题，不能从8080这个域去访问8888域的资源。

2、利用script标签去访问other域的js文件

由于

那么js不能解析，我们换一种思路，要是我们输出的是JSON字符串或者调用当前页面函数的字符串了，类似于3.1中返回的getResult({“result”:”this is other domain's data”});

所以改造一下，把other.jsp中的内容改成

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String params = request.getParameter("params");
//out.println("ajax cross success,the server receive params :"+params);
out.println("getResult({'result':'"+params+"'})");
%>

别忘了，之前jsonp/index.jsp中我们定义了，那么加入引用之后，依然记得getResult函数与引入函数的先后顺序问题。























    

    
        
            
            
                
                    
                
            

            
                无名有名我无名_593            

            
                这个屌丝很懒，什么也没留下！            
            
            

                                
                    
                    关注作者
                            

        
    


    
        Tags | 热门标签
        
            
                                
                    actionscrip
                
                                
                    bash
                
                                
                    c#
                
                                
                    c++
                
                                
                    c语言
                
                                
                    erlang
                
                                
                    flutter
                
                                
                    go
                
                                
                    golang
                
                                
                    java
                
                                
                    javascript
                
                                
                    lua
                
                                
                    node.js
                
                                
                    perl
                
                                
                    php
                
                                
                    python
                
                                
                    scala
                
                                
                    typescript
                
                                
            
        
    


    
        RankList | 热门文章
        
            
                                
                    1返回值优化和析构函数调用
                
                                
                    2打字稿和传播操作符？
                
                                
                    3`test:first job:script应该是一个字符串或一个字符串数组
                
                                
                    4适配器作为演示者？或者与演示者交谈？Android和MVP
                
                                
                    5OkHttp Post Body as JSON
                
                                
                    6在任何情况下,您更喜欢比较低的时间复杂算法更高的大O时间复杂度算法吗？
                
                                
                    7选择案例不按预期工作
                
                                
                    8如何使用Jquery和Ajax从JSON文件检索数据？
                
                                
                    9使用browserify和debowerify进行编译后,下划线中的"this"未定义
                
                                
                    10如何从TFS 2013中删除Sharepoint和Reporting Services？
                
                                
                    11xcode 7.2无法构建Objective-C模块
                
                                
                    12Meteor,WebSocket,Nginx 502错误
                
                                
                    13使用继承重叠Spring bean名称
                
                                
                    14如何强制Axis客户端使用TLSv1.2协议
                
                                
                    15使用ggplot2的直方图中心条
                
                                
                    16IncomingMessage中止事件
                
                                
                    17Openlayers 3 Offset RegularShape
                
                                
                    18如何重现相同状态的基于随机的算法
                
                                
                    19phpMyAdmin提供export.php而不是数据库sql转储
                
                                
                    20MySQL:通过块检索大的选择

DevBox开发工具箱 | 专业的在线开发工具网站