前端跨域问题的总结&&nodejs 中间层的路由转发-白红宇

前端跨域问题的总结&&nodejs 中间层的路由转发

阅读量：404 次

发布时间：2019-03-06

本文共 2153 字，大约阅读时间需要 7 分钟。

前后端交互时，跨域问题是必须要解决的重要课题。以下是解决跨域问题的几种常用方法及实践案例。

1. 使用CORS（跨域资源共享）

在前后端分离开发中，CORS是一种常用的解决跨域问题的方法。通过设置CORS策略，可以允许从指定或所有域请求接口。

示例：Node.js后台接口设置CORS

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", 'unknown');
    res.header("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
    next();
});

使用说明：

Access-Control-Allow-Origin: * 表示允许所有域名请求接口。

可以根据需求设置为特定域名，例如 http://www.wtapi.wang。

需要在所有路由中设置该中间件。

2. Node.js 路由转发

当需要对后端接口进行转发时，可以使用Node.js Express框架进行路由转发。以下是一个典型的实现示例：

转发接口示例

const request = require('request');
app.get('/api/apiturntest', function(req, res) {
    request('http://127.0.0.1:8008/api/essayNote', function(error, response, body) {
        if (error) {
            console.error('请求失败:', error);
        } else {
            res.send(body);
        }
    });
});

依赖安装：

npm install request

使用说明：

该方法适用于将后端接口转发到前端，需要启动一个Node.js服务。

需要确保转发接口支持CORS，或者在转发服务中设置CORS策略。

3. 代理接口开发

如果需要将多个接口代理到本地开发环境，可以使用代理工具或自行开发一个代理服务。

代理工具推荐

插件工具：可以使用axios等工具在前端直接代理接口。

脚本代理：通过简单的Node.js脚本快速搭建代理服务。

代理接口示例

const express = require('express');
const router = express.Router();
const request = require('request');
router.get('/api/apiturntest', function(req, res) {
    request('http://127.0.0.1:8008/api/essayNote', function(error, response, body) {
        if (error) {
            console.error('请求失败:', error);
        } else {
            res.send(body);
        }
    });
});
app.use('/api', router);
app.listen(8009, function() {
    console.log('服务器已启动在8009端口');
});

4. 前端请求处理

在前端使用axios或XMLHttpRequest发起请求时，需确保后端接口支持CORS。

示例代码

this.$http.get('http://127.0.0.1:8008/api/essayNote')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('请求失败:', error);
    });