關於vue2用vue-cli搭建環境後域名代理的http-proxy-middleware解決api接口跨域問題

在vue中用http-proxy-middleware來進行接口代理，好比：本地運行環境爲http://localhost:8080但真實訪問的api爲 http://www.baidu.com這時咱們就須要把http://www.baidu.com代理到api接口上

在build下的 dev-server.js 中咱們須要對下面代碼進行修改

var proxyMiddleware = require('http-proxy-middleware');

var proxyMiddleware = require('http-proxy-middleware')

var server = express()

server.middleware = [
        proxyMiddleware(['/mobile'], {target: 'http://baidu.com', changeOrigin: true}),
        proxyMiddleware(['/school'], {target: 'http://baidu.com', changeOrigin: true}),
        proxyMiddleware(['/api/track'], {target: 'http://baidu.com', changeOrigin: true}),
        proxyMiddleware(['/manage/integral'], {target: 'http://baidu.com', changeOrigin: true}),
];

server.use(server.middleware);

這裏須要注意須要把接口調用的開始部分分別寫在 proxyMiddleware中 如 /mobile是表明你訪問的接口爲 http://baidu.com/mobile/ 開頭的全部接口 至關於http://baidu.com/mobile/*

在調用的時候咱們用 vue-resource，在main.js中引入

vue-resource 的安裝方式:  npm install --save-dev vue-resource

import VueResource from 'vue-resource'

Vue.use(VueResource)

在頁面中具體調用爲

            this.$http.get('/mobile/api/h5/', {params: {name:1,type:2}}).then((response) => {
                     response = response.body;
                     if (response.errno === 0) {
                            this.goods = response.data;
                     }
            });

到這裏咱們就完成了vue的代碼域名代理，若有錯誤，或錯別字歡迎你們留言指正！