关尔先生·南山桥

![Node.js](/img.php?202111241689b5a3e6b88e8f73a13b3768bfa7c9.png) # 前端跨域 ## vue-cli 跨域一般设置 `vue.config.js` 里的 `devServer.proxy` , 本质是构建一个开发环境下的本地 node 服务器，进行请求转发 ## 生产跨域前后端未分离时，一般不会有跨域问题；在分离布署下，前端服务器一般是使用 `Nginx` 转发请求，少数是在 api 服务器上设置 `Access-Control-Allow-Origin` ## 花式跨域 - postMessage （推荐） - jsonp - [其它](https://www.cnblogs.com/lcspring/p/11079754.html) ## 一步一步实现本地 node 代理转发请求 ### 1. node 下载与安装 [Node.js 安装配置](https://www.runoob.com/nodejs/nodejs-install-setup.html) ### 2. 安装 Express 框架方便构建 web 服务

1	npm install express --save

### 3. 安装 express-http-proxy 代理插件

1	npm install express-http-proxy --save

### 4. 入口文件 `index.js`

var express = require('express');

var app = express();
app.use(express.json());

// 转发到 http://api.xxx.com
const httpProxy = require('express-http-proxy');
const userServiceProxy = httpProxy('http://api.xxx.com', {
  //   请求路径解析，去掉标识串 /api
  proxyReqPathResolver: function (req) {
    return req.url.replace('/api', '');
  },
});

// 设置 /api 开头的链接执行代理
app.get('/api/*', (req, res, next) => {
  userServiceProxy(req, res, next);
});

// 把 /public 当作根目录，/public内的文件都为静态资源
app.use('/', express.static('public'));

app.get('*', function (req, res) {
  res.send('404');
});

var server = app.listen(8081, function () {
  var host = server.address().address;
  var port = server.address().port;
  console.log('应用实例，访问地址为 http://%s:%s', host, port);
});

### 5. 测试 HTML 文件 `index.html` （位于/public）

// 以/api开头，将被转发
// 实际请求地址为： http://api.xxx.com/getUserInfo
fetch('/api/getUserInfo', {
  method: 'GET',
  headers: new Headers({
    'Content-Type': 'application/json',
  }),
})
  .then(res => res.text())
  .catch(error => {
    console.error('- Error:', error);
  })
  .then(response => {
    console.log('- Success:', response);
    document.write(response);
  });