炒股大赛项目中遇到的跨域情况

代理转发

项目是前后端分离，api和node不是部署在同一个域名下，所以前端的server.js就用到了代理转发来解决跨域请求api接口的问题。

// server.js

const proxy = require('express-http-proxy');
// api接口转发，config.api是接口的实际地址
app.use('/api', proxy(config.api, {
    forwardPath: (req, res) => {
      return require('url').parse(req.url).path;
    }
}));

jsonp

大赛的首页，由于PV量比较大，为了减轻服务器的压力，首页涉及到调用json数据的接口一律转化为静态化数据。
后端把首页需要展示的json数据处理成一份txt文件（其他文件格式也可），内容格式如下：

// finalUserList.txt
// json数据外面包裹了一个函数名，finalList(jsonData)
finalList(
{
    vstockZoneName: "总决赛",
    page: {
        pageNo: 1,
        pageSize: 10,
        totalItems: 20,
        totalPages: 2
    },
    vstockZoneId: 1000000,
    list: [
        {
            dayRevenueRate: 0.07487,
            positionRatio: 0.86,
            revenueRank: 1,
            revenueRate: 0.2763,
            totalAsset: 1276301.8823,
            totalRevenueRate: 0.2763,
            userNick: "筷子兄弟",
            weekRevenueRate: 0.10865
        }
    ],
    issueDate: 20170321,
    weekDefines: [
        {
            beginDate: 20170313,
            endDate: 20170317,
            periodTypeStr: "WEEK",
            zoneId: 1000000
        },
        {
            beginDate: 20170320,
            endDate: 20170321,
            periodTypeStr: "WEEK",
            zoneId: 1000000
        }
    ]
    issueDateStr: "2017-03-21 15:00",
    showPage: "true",
    zoneId: 1000000
}
)

定义一个回调函数，然后用jsonp请求这份txt文件：

function finalList(data) {
    console.log(data); // jsonp请求成功时，执行此回调函数，即拿到了json数据
}

定义的回调函数的名字和txt文件中的函数名字是一样的，这样才能拿到数据。实际上，回调函数的名字前端应该是可以自定义的，比如这样：

后端拿到callback参数值，再自动生成对应的函数名，但这样无疑又增加了服务端的工作量。由于项目中调用的静态化数据接口也不算多，我们就直接约定死了回调函数的名字。

jsonp的原理：Web页面上调用js文件时不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如