輕松解決vuejs跨域

Vuejs跨域問題實戰

有時候，本地使用webpack開啟一個node的dev端口，項目中使用vuejs去訪問別人家的api，比如豆瓣或者其他的api，不使用jsonp肯定就會報跨域的問題。

如何讓我們調用別人家的api就像是調用自己家的一樣呢？答案就是利用自己的后台去訪問這個api，然后轉發到自己的前端，但是這么搞，豈不是很麻煩，有沒有簡單的傻瓜式插件可以替我們做這個操作呢？我們用一下代理的思路proxy來解決這個問題。

其實nodejs有一個httpProxy的組件，正好webpack也支持，那么我們看看如何使用httpProxy，自動的監聽vue想要get的某些網站api的請求，自動利用后台去訪問api，拿到返回結果，返回給vue。

1.最近使用了http-proxy-middleware! https://www.npmjs.com/package/http-proxy-middleware插件之后，訪問別人家的api就像是自己家的一樣。

//node的index.js
var proxyMiddleware = require('http-proxy-middleware')
//攔截一切/api的請求，后台代理獲取數據，返回到前端
var proxyTable = {
      '/api': {
        target: 'http://xxx.com/v4/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    };
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(context, options))
})

//vue

export default {
        data() {
            return {
                list:[]
            }
        },

        ready() {
            this.getBanner();
        },

        methods: {
            //請求別人家的api獲取列表 /api/xxxx 會被proxy，繞過跨域
            getBanner() {
                const self = this self.$http.get(';/api/xxxx/home';, {
                    _t: new Date().getTime()
                }).then(response = >{
                    let data = response.data
                    //數據對象
                    let json = data.data
                    if (data.status === 0) {
                        self.list = json.list
                    }
                },
                (response) = >{
                    console.log(response)
                })
            }
        },
        components: {

        }
 }

記得提前安裝模塊:npm install -D http-proxy-middleware

2.或者使用jsonp

參考:https://aotu.io/notes/2016/10/13/vue2/

mounted: function() {
    this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, {
        headers: {
        },
        emulateJSON: true
    }).then(function(response) {
        // 這里是處理正確的回調
        this.articles = response.data.subjects
        // this.articles = response.data["subjects"] 也可以
    }, function(response) {
        // 這里是處理錯誤的回調
        console.log(response)
    });
}

// 不加跨域xhr會發起options請求
Vue.http.options.headers={
	'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
};
// post的時候會把JSON對象轉成formdata
Vue.http.options.emulateJSON=true;

4.nodejs 解除跨域限制：

app.all('*', function(req, res, next) {

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();

});

proxyTable參考：http://div.io/topic/1825
https://segmentfault.com/a/1190000007231750

落雨
http://www.cnblogs.com/ae6623/p/6124229.html
http:js-dev.cn