vue node网络代理 实现测试、生产环境前端跨域

node网络代理 实现测试、生产环境前端跨域
package.json

"scripts": {
    "serve": "vue-cli-service serve --open",
    "start": "node server.js",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint --fix",
    "test:unit": "vue-cli-service test:unit",
  },

docker 配置 npm start

serve.js 文件如下

'use strict';

// Constants
const PORT = 8080;
const HOST = '0.0.0.0';
const REQUEST_ID_HEADER = 'x-fc-request-id'

const express = require('express');
const bodyParser = require('body-parser');
//中间件支持多个代理
const { createProxyMiddleware } = require('http-proxy-middleware');
const cookieParser = require('cookie-parser');
//代理配置文件
const proxyConfig = require('./config/proxy');
const app = express();
const { DEPLOY_ENV } = process.env;

console.log('using DEPLOY_ENV =>', DEPLOY_ENV);

app.use(cookieParser());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(bodyParser.raw());

app.get('/health', (req, res) => {
  console.log(`receive health check`);
  res.status(200);
  console.log(`i am ready`);
  res.send('i am ready\n');
});

// eslint-disable-next-line guard-for-in
for (const path in proxyConfig) {
  app.use(path, createProxyMiddleware(proxyConfig[path]));
}
// invocation
app.post('/invoke', (req, res) => {
  var rid = req.headers[REQUEST_ID_HEADER]
  console.log(`FC Invoke Start RequestId: ${rid}`)
  res.send('OK');
  console.log(`FC Invoke End RequestId: ${rid}`)
});

var server = app.listen(PORT, HOST);
console.log(`Running on http://${HOST}:${PORT}`);
app.use(express.static('dist'));
server.timeout = 0; // never timeout
server.keepAliveTimeout = 0; // keepalive, never timeout

src同级新建 config文件夹下 新增proxy.js

const { DEPLOY_ENV = 'dev' } = process.env.NODE_ENV || {};
console.log(`target: ${process.env.NODE_ENV}`)
const targetConfig = {
  // 跨域效验配置目标跨域地址
  insuranceclauseApi: {
    branch: 'http://arm-tech.net/',
    dev: 'http://arm-tech.net/',
    test: 'http://arm-tech.net/',
    development: 'http://arm-tech.net/',
    production: 'http://arm-tech.net/',
  },
};

function getProxyTarget(name) {
  const config = targetConfig[name];
  // @ts-ignore
  let target = config[DEPLOY_ENV] || config.production;
  console.log(`${name} functarget: ${target}`);
  return target;
}
const proxyConfig = {
  '/corsApi': {
    target: getProxyTarget('insuranceclauseApi'),
    changeOrigin: true,
    secure: false,
    pathRewrite: {
      "^/corsApi": "/",
    },
  },
};

module.exports = proxyConfig;

vue 文件

import axios from 'axios'


 RequestSessionId(e) {
      var params = {
          abc: '123',
      }
      axios.get('/corsApi/valid2?123=' + params.abc).then(
        response => {
          console.log('response',response)
        },
        error => {'请求失败',error.message}
      )
    },

一定要用原装axios 封装axios会有一些头参数或者其他更改导致跨域请求报错。