web跨域取数据问题

发布于

核心是使用jsonp

  1. 应用场景：大型网站为了进行协同开发，或者出于扩展性的考虑，会做多域名的处理.
    • 比如：个人中心 ucenter.xxx.com
    • 首页 www.xxx.com
    • 商城页 shop.xxx.com
  2. 在web端不用域名之间是不能直接存取session，cookie数据的，也不能直接通过ajax异步请求json数据。

为了解决这类问题，就出现了jsonp，专门解决跨域问题。

  1. 业务需求：
    • 在商城页和首页需要判断用户的登录状态：
    • 已登录显示用户头像
    • 未登录显示登录按钮

核心代码

php

  • 个人中心返回用户信息(接口)
代码语言：javascript
复制
    public function getUserInfoJsonpAction()
    {
        $data = Service_User_InfoModel::getUserInfo($this->_loginUserId);
        $this->jsonp(1, $data);
    }
  • jsonp的写法
代码语言：javascript
复制
    /**
     * 封装：jsonp跨域
     */
    public function jsonp($errno = 0, $data = '', $message = '')
    {
        $errno = intval($errno);

    $result = array(
        'errno' => $errno,
        'message' => $message,
        'data' => $data
    );

    echo $_GET['callback'] . "(" . json_encode($result) . ")";
    exit;
}</code></pre></div></div><blockquote><p>js(基于seajs框架)</p></blockquote><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">define(&#39;public.js&#39;, [&#39;widget/search.js&#39;, &#39;module/home/notice.js&#39;], function (require, exports, module) {

_url = {
    userInfo: &#39;http://ucenter.xxx.com/api/getUserInfoJsonp/&#39;,
};
//获取用户信息
requestUrl(_url.userInfo, {}, function (userInfo) {
    globalData.user_info = userInfo;
    globalData.user_info.uid = userInfo.id;
    console.log(userInfo);
}, true);



});

#php#json#com#jsonp#session