vue 非常规跨域实现 proxyTable 设置及依赖

Posted 2021-01-19 resultwp

1、config/index.js  设置跨域的地址

     proxyTable: {

        ‘/api‘: {    //跨域标识     请求地址为‘http://1xxx.xxx.com/index/list’, 请求时 “/api/index/list”

             target: ‘http://1xxx.xxx.com‘,

             changeOrigin: true,   //允许跨域

             pathRewrite: {            //重新跨域标识

                  ‘^/api‘: ‘‘

             }

         }

     },

 

2、build/webpack.dev.conf.js  引入express、http-proxy-middleware，如下：

    const proxyMiddleware = require(‘http-proxy-middleware‘)

 

    var express = require(‘express‘)

    var app = express()

    // proxy api requests

    const proxyTable=config.dev.proxyTable;

     Object.keys(proxyTable).forEach(function (context) {

      var options = proxyTable[context]

       if (typeof options === ‘string‘) {

         options = { target: options }

       }

       app.use(proxyMiddleware(options.filter || context, options))

    })