10行代码解决前端开发的跨域问题

前提

新建一个文件夹 proxy
安装node、npm、express。
需要特别注意,在4.x版本的 express 安装时,需要安装 express 控制器

npm install -g express

npm install express-generator -g  // 4.x

如果安装速度太慢,可以指定从淘宝镜像来装

npm install -g express –registry=https://registry.npm.taobao.org
重点

重点来了,安装完以后,新建 server.js
这时候的目录结构是这样的

在这里插入图片描述

将下面的代码写入 server,js

const express = require('express');
const path = require('path');
const request = require('request');

const app = express();
// 跨域请求的转发地址
let serverUrl='http://192.168.0.151:8080'; 
// 配置静态文件服务中间件,指定静态资源的地址,下面的 bootstrap 就是我的前端项目,路径可以是相对的,也可以是绝对的
app.use(express.static(path.join(__dirname, '../bootstrap')));
// 实现转发并返回接收的数据
app.use('/', function(req, res) {
  let url = serverUrl + req.url;
  req.pipe(request(url)).pipe(res);
});
app.listen(3000, function () {
  console.log('your project is running at localhost:3000');
});

ok,代码写完了,打开 cmd 或者 terminal 或者 gitbash,进入到 proxy目录下,执行

node server.js

你会看到控制台打出了 ‘server is running at localhost:3000’

打开浏览器,输入 ‘localhost:3000’ 访问你的项目,默认看到的是 index.html,如果没有,需要你手动把项目首页输入地址栏就可以了。

另外:将 localhost 更换为你本机的 ip 地址,就可以让处在同一个局域网下的其他人查看你的项目,对于移动端项目,也可以在手机处在局域网下直接用手机访问,调试起来非常方便了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值