WebPack系列之Proxy

 

背景

當我們直接去訪問https://m.weibo.cn/api/config/list時由於端口、域名的不同產生了跨域,無法請求到資源數據.

分析

WebPack中devServer的proxy代理其實是集成了http-proxy-middleware

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

var app = express();

app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
app.listen(3000);

　　配置proxy 過程中,option的配置相當與配置了http-proxy-middleware的api

proxy:{
      '/api': {
          target: 'https://m.weibo.cn',
          changeOrigin: true
      }
    }

　　注意:changeOrigin是將基於名稱的虛擬托管網站的選項changeOrigin設置為true,如果不配置請求就會報404錯誤

當我們配置好代理后,就可以解決了跨域問題,訪問到數據資源

$.get('/api/config/list',function (data) {
        console.log(data);
    })

　　

get請求打印出數據如下:

 如何想在控制台打印消息記錄則添加配置項 logLevel: 'debug',同時當訪問的接口需要先登錄,可以通過添加配置項header設定cookies進行身份確認,最終對接口的訪問.