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会有一些头参数或者其他更改导致跨域请求报错。