• 使用jsonp和cros解决跨域问题


    跨域问题

    跨域问题会出现于前端访问不同系统的地址适合会产生的问题,目前有个项目的前端和后端分离成两个项目的,导致前端在访问后端的时候就会产生跨域问题。解决方法时使用get的jsonp返回数据即可。还有使用Falsh或者代理服务器中转等方法。其实POST方法还有个CORS可以实现ajax跨域post请求,只是它支持IE8+版本,低版本不支持,但我认为未来是属于它的。

    jsonp解决方案

    前端:
    $.ajax({
    url : url,
    type : "get",
    data : datas,
    callback: 'callback',
    dataType:'jsonp'}

    后端:
    public static String ObjectToJsonp(Object object,String callBack)
    {
    String jsonp = JSONObject.toJSONString(object, SerializerFeature.DisableCircularReferenceDetect);
    jsonp = callBack + "(" + jsonp + ")";
    return jsonp;
    }

    这样就可以完成get方式的跨域解决。

    cros解决方案

    前端(绝对地址):

    var xhr = new XMLHttpRequest();  
    xhr.open("GET", "http://blog.csdn.net/hfahe", true);  
    xhr.send();  
    

    后端:

    服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。
    
    HTTP 头的设置方法有很多,http://enable-cors.org/这篇文章里对各种服务器和语言的设置都有详细的介绍,下面我们主要介绍Apache和PHP里的设置方法。
    
    Apache:Apache需要使用mod_headers模块来激活HTTP头的设置,它默认是激活的。你只需要在Apache配置文件的<Directory>, <Location>, <Files>或<VirtualHost>的配置里加入以下内容即可:
    
    Header set Access-Control-Allow-Origin *  
    

    缺陷:支持现代浏览器,对于老旧的浏览器版本不支持。

  • 既然不能成为屠龙的勇士,那么就好好成为一名优秀的管家,为公主建设一个温馨美好的家。
    Since it can not become a dragon warrior, then it is a good housekeeper, for the princess to build a warm and beautiful home.

  • 相关阅读:
    logback使用
    数据库阿里连接池 配置
    expect.js
    shim和polyfill有什么区别
    console.js还有浏览器不支持?
    vue项目如何实现剪切板功能--vue-clipboard2
    跟我一起使用webpack给一个开源项目添加一个运行入口
    Axure之添加点击页面
    Axure之母版窗口
    【react】react-reading-track
  • 原文地址:https://www.cnblogs.com/ITflying/p/7305028.html
  • Copyright © 2020-2023  润新知