Vue处理跨域

Vue处理ajax跨域

一般处理跨域有好几种方式，jsonp，document.domain, post Message...,今天我们主要来谈谈vue 通过代理方式来实现跨域

安装

npm install http-proxy-middleware --save

npm install express --save

代理配置

下面主要通过花瓣网的搜索接口为例：

• vue1.0版本

  • 设置build/dev-server.js

    var proxyMiddleware = require('http-proxy-middleware')
    const express = require('express')
    var server = express()

    server.middleware = [
    proxyMiddleware(['search/hint'], {target: 'http://huaban.com/', changeOrigin: true}) // 若有多个主域相同，不同路径下的接口，可以创建多个proxyMiddleware
    ];

    server.use(server.middleware);

    • 设置config/index.js 中代理： proxyTable

      proxyTable: {
      '/api': {
      target: 'http://huaban.com', // 远程接口前缀
      changeOrigin: true,
      pathRewrite: {
      '^/api': ''
      }
      }

• vue2.0实现

  由于vue2.0文件目录发生变化，build/dev-server.js 文件已不存在，主要修改变换到build/webpack.dev.conf.js
  其他配置和vue1.0保持一致

接口调用：

通过调用花瓣网搜索的接口

this.$http.get('api/search/hint/?q=e&limit=6').then((response) => {
console.log(response.data.result)
});

获取到的数据：
(6) ["二次元", "儿童", "儿童房", "儿童画", "儿童摄影", "二维码"]

相关http-proxy-middleware用法参考
https://github.com/chimurai/http-proxy-middleware