精华内容
下载资源
问答
  • 解决ajax跨域问题

    2016-12-28 16:59:18
    解决ajax跨域问题
  • 解决ajax跨域问题【5种解决方案】

    万次阅读 多人点赞 2018-09-02 21:31:33
    什么是跨域问题? 跨域问题来源于JavaScript的"同源策略",即只有 协议+主机名+...跨域问题是针对JS和ajax的,html本身没有跨域问题。 查看浏览器开发者工具Console报错: Failed to load http://a.a.com:8080/A/...

    什么是跨域问题?

    跨域问题来源于JavaScript的"同源策略",即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的,html本身没有跨域问题。

    查看浏览器开发者工具Console报错:

    Failed to load http://a.a.com:8080/A/FromServlet?userName=123: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://b.b.com:8080' is therefore not allowed access.

    http://www.abc.com/a/b 调用 http://www.abc.com/d/c(非跨域)

    http://www.abc.com/a/b 调用 http://www.def.com/a/b (跨域:域名不一致)

    http://www.abc.com:8080/a/b 调用 http://www.abc.com:8081/d/c (跨域:端口不一致)

    http://www.abc.com/a/b 调用 https://www.abc.com/d/c (跨域:协议不同)

    请注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域。

     

     

    跨域问题怎么解决?

    1、响应头添加Header允许访问

    2、jsonp 只支持get请求不支持post请求

    3、httpClient内部转发

    4、使用接口网关——nginx、springcloud zuul   (互联网公司常规解决方案)

     

    解决方式1:响应头添加Header允许访问

    跨域资源共享(CORS)Cross-Origin Resource Sharing

    这个跨域访问的解决方案的安全基础是基于"JavaScript无法控制该HTTP头"

    它需要通过目标域返回的HTTP头来授权是否允许跨域访问。

    response.addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问 
    response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

     

    解决方式2:jsonp 只支持get请求不支持post请求

    用法:①dataType改为jsonp     ②jsonp : "jsonpCallback"————发送到后端实际为http://a.a.com/a/FromServlet?userName=644064&jsonpCallback=jQueryxxx     ③后端获取get请求中的jsonpCallback    ④构造回调结构

    $.ajax({
    			type : "GET",
    			async : false,
    			url : "http://a.a.com/a/FromServlet?userName=644064",
    			dataType : "jsonp",//数据类型为jsonp  
    			jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数
    			success : function(data) {
    				alert(data["userName"]);
    			},
    			error : function() {
    				alert('fail');
    			}
    		});
    

     

    //后端
            String jsonpCallback = request.getParameter("jsonpCallback");
    		//构造回调函数格式jsonpCallback(数据)
    		resp.getWriter().println(jsonpCallback+"("+jsonObject.toJSONString()+")");

    JSONP实现原理

    在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的ajax是不能进行跨域请求的。但 img、iframe 、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用<script>标签的开放策略,我们可以实现跨域请求数据,当然这需要服务器端的配合。 Jquery中ajax的核心是通过 XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的 js脚本。

      当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的JavaScript代码。因为jsonp 跨域的原理就是用的动态加载<script>的src ,所以我们只能把参数通过url的方式传递,所以jsonp的 type类型只能是get !

    示例:

    $.ajax({

        url: 'http://192.168.10.46/demo/test.jsp',        //不同的域

        type: 'GET',                                                        // jsonp模式只有GET 是合法的

        data: {

            'action': 'aaron'

        },

        dataType: 'jsonp',                                              // 数据类型

        jsonp: 'jsonpCallback',                                     // 指定回调函数名,与服务器端接收的一致,并回传回来

    })

    其实jquery 内部会转化成

    http://192.168.10.46/demo/test.jsp?jsonpCallback=jQuery202003573935762227615_1402643146875&action=aaron

    然后动态加载

    <script type="text/javascript"src="http://192.168.10.46/demo/test.jsp?jsonpCallback= jQuery202003573935762227615_1402643146875&action=aaron"></script>

    然后后端就会执行jsonpCallback(传递参数 ),把数据通过实参的形式发送出去。

      使用JSONP 模式来请求数据的整个流程:客户端发送一个请求,规定一个可执行的函数名(这里就是 jQuery做了封装的处理,自动帮你生成回调函数并把数据取出来供success属性方法来调用,而不是传递的一个回调句柄),服务器端接受了这个 jsonpCallback函数名,然后把数据通过实参的形式发送出去

     

    (在jquery 源码中, jsonp的实现方式是动态添加<script>标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数,当 <script>代码插入时函数执行,执行完毕后就 <script>会被移除。同时jquery还对非跨域的请求进行了优化,如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。)

     

    解决方式3:httpClient内部转发

    实现原理很简单,若想在B站点中通过Ajax访问A站点获取结果,固然有ajax跨域问题,但在B站点中访问B站点获取结果,不存在跨域问题,这种方式实际上是在B站点中ajax请求访问B站点的HttpClient,再通过HttpClient转发请求获取A站点的数据结果。但这种方式产生了两次请求,效率低,但内部请求,抓包工具无法分析,安全。

    $.ajax({
    			type : "GET",
    			async : false,
    			url : "http://b.b.com:8080/B/FromAjaxservlet?userName=644064",
    			dataType : "json",
    			success : function(data) {
    				alert(data["userName"]);
    			},
    			error : function() {
    				alert('fail');
    			}
    		});

     

    @WebServlet("/FromAjaxservlet")
    public class FromAjaxservlet extends HttpServlet{
    	
    	
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    		try {
    			//创建默认连接
    			CloseableHttpClient httpClient = HttpClients.createDefault();
    			//创建HttpGet对象,处理get请求,转发到A站点
    			HttpGet httpGet = new HttpGet("http://a.a.com:8080/A/FromServlet?userName="+req.getParameter("userName")); 
                            //执行
    			CloseableHttpResponse response = httpClient.execute(httpGet);
    			int code = response.getStatusLine().getStatusCode();
    			//获取状态
    			System.out.println("http请求结果为:"+code);
    			if(code == 200){
                                    //获取A站点返回的结果
    				String result = EntityUtils.toString(response.getEntity());
    				System.out.println(result);
                                    //把结果返回给B站点
    				resp.getWriter().print(result);
    			}
    			response.close();
    			httpClient.close();
    		} catch (Exception e) {
    		}
    	}
    }

     

    解决方式4:使用nginx搭建企业级接口网关方式

    www.a.a.com不能直接请求www.b.b.com的内容,可以通过nginx,根据同域名,但项目名不同进行区分。什么意思呢?这么说可能有点抽象。假设我们公司域名叫www.nginxtest.com

    当我们需要访问www.a.a.com通过www.nginxtest.com/A访问,并通过nginx转发到www.a.a.com

    当我们需要访问www.b.b.com通过www.nginxtest.com/B访问,并通过nginx转发到www.a.a.com

    我们访问公司的域名时,是"同源"的,只是项目名不同,此时项目名的作用只是为了区分,方便转发。如果你还不理解的话,先看看我是怎么进行配置的:

    server {
            listen       80;
            server_name  www.nginxtest.com;
            location /A {
    		    proxy_pass  http://a.a.com:81;
    			index  index.html index.htm;
            }
    		location /B {
    		    proxy_pass  http://b.b.com:81;
    			index  index.html index.htm;
            }
        }
    

    我们访问以www.nginxtest.com开头且端口为80的网址,nginx将会进行拦截匹配,若项目名为A,则分发到a.a.com:81。实际上就是通过"同源"的域名,不同的项目名进行区分,通过nginx拦截匹配,转发到对应的网址。整个过程,两次请求,第一次请求nginx服务器,第二次nginx服务器通过拦截匹配分发到对应的网址。

     

    解决方式5:使用Spring Cloud zuul接口网关

    我比较懒...

    展开全文
  • 解决 ajax 跨域问题

    2019-04-18 09:24:20
    ajax跨域,这应该是最全的解决方案了 SpringBoot配置Cors解决跨域请求问题 SpringBoot2.x配置Cors跨域
    展开全文
  • 主要为大家详细介绍了SpringBoot解决ajax跨域问题的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Jsonp解决ajax跨域问题

    2016-11-28 14:51:15
  • 如何解决Ajax跨域问题

    2015-06-26 17:19:05
    如何解决ajax跨域问题(转) 由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题。本篇将讲述一个...

    Ajax跨域问题--信息总结归纳

    如何解决ajax跨域问题(转)

    由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题。本篇将讲述一个小白从遇到跨域不知道是跨域问题,到知道是跨域问题不知道如何解决,再到解决跨域问题,最后找到两种方法解决ajax 跨域问题的全过程。

    不知是跨域问题

    起 因是这样的,为了复用,减少重复开发,单独开发了一个用户权限管理系统,共其他系统获取认证与授权信息,暂且称之为A系统;调用A系统以B为例。在B系统 中用ajax调用A系统系统的接口(数据格式为json),当时特别困惑,在A系统中访问相应的url可正常回返json数据,但是在B系统中使用 ajax请求同样的url则一点儿反应都没有,好像什么都没有发生一样。这样反反复复改来改去好久都没能解决,于是求救同事,提醒可能是ajax跨域问 题,于是就将这个问题当做跨域问题来解决了。

    知跨域而不知如何解决

    知道问题的确切原因,剩下的就是找到解决问题的方法了。google了好久,再次在同事的指点下知道jQuery的ajax有jsonp这样的属性可以用来解决跨域的问题。

    找到一种解决方式

    现在也知道了怎样来解决跨域问题,余下的就是实现的细节了。实现的过程中错误还是避免不了的。由于不了解json和jsonp两种格式的区别,也犯了错误,google了好久才解决。

    首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版:

    复制代码
    $(document).ready(function(){
       var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
           +"?id=1&callback=?';
       $.ajax({
         url:url,
         dataType:'jsonp',
         processData: false, 
         type:'get',
         success:function(data){
           alert(data.name);
         },
         error:function(XMLHttpRequest, textStatus, errorThrown) {
           alert(XMLHttpRequest.status);
           alert(XMLHttpRequest.readyState);
           alert(textStatus);
         }});
       });
    复制代码

    这样写是完全没有问题的,起先error的处理函数中仅仅是alert(“error”),为了进一步弄清楚是什么原因造成了错误,故将处理函数变 为上面的实现方式。最后一行alert使用为;parsererror。百思不得其解,继续google,最终还是在万能的stackoverflow找 到了答案,链接在这里。原因是jsonp的格式与json格式有着细微的差别,所以在server端的代码上稍稍有所不同。

    比较一下json与jsonp格式的区别:

    json格式:
    {
        "message":"获取成功",
        "state":"1",
        "result":{"name":"工作组1","id":1,"description":"11"}
    }
    jsonp格式:
    callback({
        "message":"获取成功",
        "state":"1",
        "result":{"name":"工作组1","id":1,"description":"11"}
    })

    看出来区别了吧,在url中callback传到后台的参数是神马callback就是神马,jsonp比json外面有多了一层,callback()。这样就知道怎么处理它了。于是修改后台代码。

    后台java代码最终如下:

    复制代码
    @RequestMapping(value = "/getGroupById")
      public String getGroupById(@RequestParam("id") Long id,
          HttpServletRequest request, HttpServletResponse response)
          throws IOException {
        String callback = request.getParameter("callback");
        ReturnObject result = null;
        Group group = null;
        try {
          group = groupService.getGroupById(id);
          result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);
        } catch (BusinessException e) {
          e.printStackTrace();
          result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
        }
        String json = JsonConverter.bean2Json(result);
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();
        out.print(callback + "(" + json + ")");
        return null;
      }
    复制代码

    注意这里需要先将查询结果转换我json格式,然后用参数callback在json外面再套一层,就变成了jsonp。指定数据类型为jsonp的ajax就可以做进一步处理了。

    虽然这样解决了跨域问题,还是回顾下造成parsererror的原因。原因在于盲目的把json格式的数据当做jsonp格式的数据让ajax处理,造成了这个错误,此时server端代码是这样的:

    复制代码
    @RequestMapping(value = "/getGroupById")
      @ResponseBody
      public ReturnObject getGroupById(@RequestParam("id") Long id,
          HttpServletRequest request, HttpServletResponse response){
        String callback = request.getParameter("callback");
        ReturnObject result = null;
        Group group = null;
        try {
          group = groupService.getGroupById(id);
          result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);
        } catch (BusinessException e) {
          e.printStackTrace();
          result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
        }
        return result;
      }
    复制代码

    至此解决ajax跨域问题的第一种方式就告一段落。

    追加一种解决方式

    追求永无止境,在google的过程中,无意中发现了一个专门用来解决跨域问题的jQuery插件-jquery-jsonp

    有第一种方式的基础,使用jsonp插件也就比较简单了,server端代码无需任何改动。

    来看一下如何使用jquery-jsonp插件解决跨域问题吧。

    复制代码
    var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
        +"?id=1&callback=?";
    $.jsonp({
      "url": url,
      "success": function(data) {
        $("#current-group").text("当前工作组:"+data.result.name);
      },
      "error": function(d,msg) {
        alert("Could not find user "+msg);
      }
    });
    复制代码

     

    至此两种解决跨域问题的方式就全部介绍完毕。

    原文地址:http://www.congmo.net/blog/2012/06/27/ajax-cross-domain/


    同时,网上查找时,其他的链接--供参考:

    http://www.open-open.com/lib/view/open1334026513327.html




    展开全文
  • 如何解决ajax跨域问题

    2017-12-21 11:55:21
    本篇将讲述一个小白从遇到跨域不知道是跨域问题,到知道是跨域问题不知道如何解决,再到解决跨域问题,最后找到两种方法解决ajax 跨域问题的全过程。 不知是跨域问题 起 因是这样的,为了复用,减少重复开发,单独...
  • jsonp的解决ajax跨域问题
  • Spring Boot解决Ajax跨域问题 对于跨域问题让很多小伙伴头疼,我也是走了很多的弯路才摸索出来,记录下来。 创建一个类添加 @Configuration注解 将访问权限改为 * 设置为最大权限。 @Configuration public class ...
  • 如何解决ajax跨域问题(转) 由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题。本篇将...
  • 完美解决AJAX跨域问题

    千次阅读 2016-11-10 19:11:56
    完美解决AJAX跨域问题 解决的办法,大概有如下几种: 1. 使用中间层过渡的方式(可以理解为“代理”): 中间过渡,很明显,就是在AJAX与不同域的服务器进行通讯的中间加一层过渡,这一层过渡可以是PHP、...
  • 解决Ajax 跨域问题 - JSONP原理解析

    万次阅读 2016-11-11 23:24:55
    解决Ajax 跨域问题 - JSONP原理解析为什么会有跨域问题? - 因为有同源策略 同源策略是浏览器的一种安全策略,所谓同源指的是 请求URL地址中的 协议, 域名 和 端口 都相同,只要其中之一不相同就是跨域 同源策略主要...
  • 看小白如何解决ajax跨域问题

    千次阅读 2015-07-29 11:30:07
    本篇将讲述一个小白从遇到跨域不知道是跨域问题,到知道是跨域问题不知道如何解决,再到解决跨域问题,最后找到两种方法解决ajax跨域问题的全过程。 不知是跨域问题 起因是这样的,为了复用,减少重复开发,单独...
  • Jsonp解决Ajax跨域问题

    千次阅读 2018-01-25 10:27:25
    一、介绍 最近跨域问题比较多,而且自己刚好也看到这一块,就总结了一下,关于JSONP的...注意一点是,这里是用Jsonp解决ajax跨域问题,具体的实现其实不是ajax。 1、同源策略 浏览器有一个很重要的概念—
  • JSONP--解决ajax跨域问题

    千次阅读 2016-02-24 10:03:19
    深入浅出JSONP--解决ajax跨域问题 取不到数据!  上周客户新买了服务器,原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net),在客户的主页中有一个动态显示最新消息的处理,这个处理就是通过...
  • 如何解决Ajax跨域问题-1

    千次阅读 2009-12-04 09:27:00
    如何解决Ajax跨域问题 最近在做AJAX调用C的问题,出现跨域问题,学习总结如下: 在做ajax读取数据的时候,经常会遇到ajax需要跨域的问题,但由于浏览器安全方面的限制,XMLHttpRequest()只能访问同一域下的数据,这...
  • 本篇将讲述一个小白从遇到跨域不知道是跨域问题,到知道是跨域问题不知道如何解决,再到解决跨域问题,最后找到两种方法解决ajax 跨域问题的全过程。 不知是跨域问题 起 因是这样的,为了复用,减少重复开发...
  • jsonp解决Ajax跨域问题

    2017-11-10 11:27:22
    什么是跨域?  1、域名不同。  2、域名相同,端口不同。  3、由于同源策略,安全性考虑... ajax跨域问题:由js请求处于跨域范围的数据,请求不到。  问题解决:jsonp解决。  什么是jsonp?  它是一个跨域解决

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,084
精华内容 17,633
关键字:

如何解决ajax跨域问题