问题

1 . 在跨域请求(经常是在用到别人的接口时)会遇到一些限制,对方会检查http请求携带的来源,比如检查host,referer等.

代理

1 .
我们可以在本地起一个node服务,比如vue开发中的dev-server,使用其发http请求,通过修该请求信息,能够被对方接口通过返回数据,又因为同源策略是浏览器安全的范畴,所以在node上不用考虑跨域问题.
2 .
项目中只需发一个ajax请求(因为向本地node服务发,故同源,不用考虑跨域).vue中使用axios作为ajax工具,其既可以在浏览器中使用,也可以在node中使用.

import axios from 'axios',
let url = '/api/getData',
let data = {....},
axios.get(url, {
    params: data
}).then((res) => {
  ...........................
  })

3 .
在本地node服务中对请求’/api/getData’做代理,发请求到实际的接口

var axios = require('axios')
var app = express()
var apiRoutes = express.Router()

apiRoutes.get('/getData', function (req, res) {
    //实际接口
  var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
  //修改请求头信息
  axios.get(url, {
    headers: {
      referer: 'https://c.y.qq.com/',
      host: 'c.y.qq.com'
    },
    params: req.query
  }).then((response) => {
    res.json(response.data)
  }).catch((e) => {
    console.log(e)
  })
})

app.use('/api', apiRoutes)

1 .
jsonp简单封装了跨域请求方法jsonp,利用script标签不受同源策略的限制,达到ajax的效果.

2 .

    jsonp(url, opts, fn)

    url (String) url to fetch
    opts (Object), optional
        param (String) name of the query string parameter to specify the callback (defaults to callback)
        timeout (Number) how long after a timeout error is emitted. 0 to disable (defaults to 60000)
        prefix (String) prefix for the global callback functions that handle jsonp responses (defaults to __jp)
        name (String) name of the global callback functions that handle jsonp responses (defaults to prefix + incremented counter)
    fn callback
        The callback is called with err, data parameters.

    If it times out, the err will be an Error object whose message is Timeout.

    Returns a function that, when called, will cancel the in-progress jsonp request (fn won't be called).

opts 中里面属性都有默认值,可以不用设置,但是注意param是前后端协议好的请求字段,默认值为callback,后端要根据这个字段拿到函数名,也就是另一个属性name,即jsonp原理中js中已经定义好的函数(jsonp内部会分配给全局对象对应属性,有name则是name值,如果没有则会根据prefix自动分配,并赋值fn).

冲突

• swiper是个使用广泛，兼容性很高的js插件，可以独立使用，也可以跟jQuery配合使用。
• swiper-animate是swiper基础上开发的动画插件，可以实现非常酷炫的效果。
• 这周在写一个页面，里面有轮播图、tab选项卡，用swiper开发非常方便，当然也用到了swiper-animate，
  但是，两个swiper实例之间的 swiper-animate会互相影响，发生动画效果消失或错乱。
• 在网上也没找到解决办法，最后只能用笨办法了。

hexo + github 部分

• 以前一直用的像博客园这样专业的博客网站,但是一直想有个个人站点,正好github提供这样的类似功能,并且发现hexo这样的好工具.hexo使用markdown写文章,并且支持github部署.这就很完美了.
• 如何使用,网上已有好多教程,不再赘言.
• 美中不足的是:换了电脑或者电脑坏了,源文件丢失,就得重新写,非常的麻烦.
• 网上也有很多解决方式,我比较喜欢在github备份源文件,并且使用AppVeyor实现自动部署,不用在本地产生文件,也不用即备份又要部署那么繁琐.
• 我是学习这篇教程做的,Hexo的版本控制与持续集成,以下也是我根据其做的实践.