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

转载于:https://www.cnblogs.com/goddess/p/8358471.html