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