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

Posted resultwp

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 非常规跨域实现 proxyTable 设置及依赖相关的知识,希望对你有一定的参考价值。

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))
    })

以上是关于vue 非常规跨域实现 proxyTable 设置及依赖的主要内容,如果未能解决你的问题,请参考以下文章

vue 设置proxyTable解决跨域问题

使用vue-cli开发时跨域问题

vue proxyTable 接口跨域请求调试

webpack之proxyTable设置跨域

webpack proxyTable 跨域

使用proxyTable 解决webpack+vue-cli+vue-resource中跨域问题