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