vue框架jsonp跨域获取不同源数据

最近在熟悉VUE前端框架，与后台NodeJS的相关知识，现遇到解决不同源跨域问题。记录如下

NodeJS版本为v8.9.0
前端vue使用vue-cli脚手架搭建，版本为2.9.2
后台用的Express框架，版本为

后台部分

• 先是后台Express框架部分。 在routes文件夹下新建一个路由文件，文件名为topGoods.js

var express = require('express');var router = express.Router();var curl = require('../utils/curl');var request = require('request'); // 引入request模块，进行模拟请求// 使用了大淘客的apiconst topGoodsApi = 'http://api.dataoke.com/index.php?r=Port/index&type=top100&appkey=59f42fbc5a&v=2';//get方式模拟请求接口数据router.get('/', function(req, res, next) {    let page = req.query.page;    request(topGoodsApi, function (error, response, body) {        res.jsonp(JSON.parse(body));    });});module.exports = router;

启动Express服务后，页面访问 http://localhost:3000/topgoods，即可可看数据以JSON格式展示

前台部分

• 下面是前端部分。在VUE框架中使用AJAX，需要用到插件vue-resource。

//安装vue-resource$ npm install vue-resource -g  

• 然后在vue中找到src目录下main.js（入口JS文件），引入vue-resource
  

  原本想实现一个简单的分页，查看大淘客的接口，才发现接口不支持分页。所有只在页面实现分页传参

<template>    <div>        <div>            <a href="javascript:void(0)" @click="setPage(parseInt(currentPage) - 1)">上一页</a>            <a href="javascript:void(0)" @click="setPage(parseInt(currentPage) + 1)">下一页</a>        </div>        <ul>            <li v-for="item in result">                <a :href="item.Quan_link"><img :src="item.Pic" :alt="item.Introduce"></a>                <a :href="item.Quan_link">{{ item.D_title }}</a>            </li>        </ul>    </div></template><script>  export default {    name: 'test',    methods: {      setPage: function (page) {        if (page <= 1) {          this.currentPage = 1        } else if (page >= this.totalNum) {          this.currentPage = this.totalNum        } else {          this.currentPage = page        }        window.location.href = this.$route.path + '?page=' + this.currentPage      }    },    data () {      return {        result: [],        currentPage: 1, // 当前页数        totalNum: 20 // 总页数      }    },    created () { // vue钩子函数，在成功创建vue对象时执行      this.currentPage = this.$route.query.page || 1      this.$http.jsonp('http://localhost:3000/topgoods?page=' + this.currentPage, { credentials: true }).then(response => {        if (response.status === 200) {          this.result = response.body.result        }      }, response => {        console.log(response)      })    }  }</script><style scoped>ul li {    text-decoration: none;    list-style-type:none;    width: 160px;    height: 230px;    float: left;    margin-left: 10px;}img {    width: 150px;    height: 170px;}</style>

• 新建一个test路由，找到router文件下index.js

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Header from '@/components/Header'import Test from '@/components/Test'  // 引入test组件Vue.use(Router)export default new Router({  mode: 'history', // 开启history模式，去除url中的'#'  routes: [    {      path: '/',      name: 'HelloWorld',      component: HelloWorld    },    {      path: '/header',      name: 'Header',      component: Header    },    {      path: '/test', // 新增一个test路由      name: 'Test',      component: Test    }  ]})

浏览器访问http://localhost:8080/test，即可看到数据展示

• 注意点：vue的url是默认hash模式，导致url中带有#，不美观。解决方法为router/index.js文件下，开启’history’模式。