Home  >  Q&A  >  body text

javascript - 用ajax怎么解决跨域的问题?

我在js中用xmlhttprequest对象向node.js服务端发送POST请求,数据全部是json格式,但是因为前端和服务端没部署到一个域下,结果访问前端的时候就提示is not allowed by Access-Control-Allow-Origin……所以怎么用ajax跨域POST数据呢?

大家讲道理大家讲道理2748 days ago463

reply all(5)I'll reply

  • 阿神

    阿神2017-04-10 12:46:59

    一般是用jsonp,原理很简单,比如你在A域名请求B域名:

    1. 在A域名的页面中使用script标签src写成B域名中服务器的URL
    script标签是可以跨域的,比如你调用Google Map或Google Analytics时引入的js就是google域名下的。

    2. 后端程序在最后需要把一段js代码的字符串print出来,这样就可以运行A域名js中写好的callback方法,将要返回的数据放入参数就可以了

    A域名中的js文件:

    <script type="text/javascript" src="http://www.b.com/action?callback=myCallback"></script>
    <script type="text/javascript">
        function myCallback (data) {
            alert(data);
        }
    </script>

    B域名中服务器

    String cb = get('callback');
    Int b = 'return data';
    print('<script type="text/javascript"> ' + cb + '(' + b + '); </script>');

    后端print数据到页面中后就会这样

    <script type="text/javascript">
        myCallback('return data');
    </script>

    reply
    0
  • PHP中文网

    PHP中文网2017-04-10 12:46:59

    使用jsonp
    http://zh.wikipedia.org/wiki/JSONP

    reply
    0
  • 怪我咯

    怪我咯2017-04-10 12:46:59

    我做过这样的jsonp 很简单的 服务器返回的js本插入到头部
    补充下服务器端 以java 为例子
    struts.xml 代码

    <action name="xx" class="xxx" method="xxxx">
    <result name="success" type="json">
    <param name="callbackParameter">callback</param> <!-- callback 可以是自己定义的请求参数-->
    </result>
    </action>

    这样就Ok了

    callback 不能少的具体请看:http://www.chengxuyuans.com/web_techn...

    reply
    0
  • PHP中文网

    PHP中文网2017-04-10 12:46:59

    jQuery 的 ajax 方法中有一个设置:

    dataType: "jsonp"

    这样就可以直接使用 JSONP了。如:
    var req = $.ajax({
    "url": "http://api.dribbble.com/shots/623231"...
    dataType: "jsonp"
    });
    req.done(function(data) {
    //do something
    console.log(data);

    });
    });
    或者直接用getJSON:

    $.getJSON("http://api.dribbble.com/shots/623231?...(data){
    console.log("Here is getJSON:"+data.toString());
    });

    reply
    0
  • PHPz

    PHPz2017-04-10 12:46:59

    jsonp http://www.cnblogs.com/catmelo/p/4175280.html

    reply
    0
  • Cancelreply