当前位置:首页 > 生活百科

express跨域设置(express解决跨域问题)

栏目:生活百科日期:2025-01-09浏览:0

一、安装express库和生成器

打开cmd输入命令: yarn global add express express-generator

解释: 上面里两个模块分别表示库和生成器,在express3时,安装express会自动的给你安装生成器express-generator ,但是在express4时,他们就被分开了,所以需要分别安装。

安装好后可以通过命令:express &–version 检查是否安装成功。

出现版本号即为安装成功(如下图所示)。

二、express生成器自动创建express项目

输入命令:express nodejs(如下图所示即为成功)

成功之后的目录:

三、跳转到package.json目录下安装相关的包

输入命令: yarn 或者 cnpm i 或者 npm i

四、启动项目

输入命令:npm run start

打开浏览器,访问127.0.0.1:3000就能获取访问我们的项目了

五、项目目录解释

bin:存放可执行文件

public:存放js、css、img等文件

router:存放路由文件

views:存放视图文件或者说模版文件

app.js:启动文件(入口文件)

package.json:存储着工程的信息及模块依赖,当在 dependencies 中添加依赖的模块时,运行 npm install,npm 会检查当前目录下的 package.json,并自动安装所有指定的模块

node_modules:存放 package.json 中安装的模块,当你在 package.json 添加依赖的模块并安装后,存放在这个文件夹下

参考链接:
www.cnblogs.com/shimily/art…

六、在此项目中如何开发

首先在routes中新建一个test.js文件

var express = require('express');var router = express.Router();router.get('/', function (req, res, next) {res.send('我是接口返回值');});module.exports = router;复制代码

然后在app.js中加入下面代码

var testRouter = require(&‘./routes/test&’);

app.use(&‘/test&’, testRouter);

然后打开浏览器控制台用fetch请求我们刚才写的接口

fetch('http:localhost:3000/test').then(res=&>{  return res.text()}).then(res=&>{  console.log(res)})复制代码

我们发现出现了跨域问题,这是因为我们在nodejs中没有添加跨域所导致的。

将下面的跨域的代码添加到app.js中

//设置跨域访问(设置在所有的请求前面即可)app.all("*", function (req, res, next) {//设置允许跨域的域名,*代表允许任意域名跨域res.header("Access-Control-Allow-Origin", "*");//允许的header类型res.header("Access-Control-Allow-Headers", "content-type");//跨域允许的请求方式 res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");if (req.method == 'OPTIONS')res.sendStatus(200); //让options尝试请求快速结束elsenext();});复制代码

然后重启一下项目,这样就可以正常访问了

在项目中修改了内容就需要我们手动重启项目,有点麻烦,我们再安装一个插件即可解决这个烦恼。

七、使用nodemon自动重启服务

安装nodemon模块

输入命令:npm i nodemon -S

创建nodemon.json文件

在项目的根目录下创建:nodemon.json文件

{"restartable": "rs","ignore": &[".git", ".svn", "node_modules/**/node_modules"],"verbose": true,"execMap": {"js": "node --harmony"},"watch": &[],"env": {"NODE_ENV": "development"},"ext": "js json njk css js "}复制代码

使用nodemon模块

在你的package.json文件中,添加一行脚本代码

&“dev&”: &“nodemon ./bin/www&”

“express跨域设置(express解决跨域问题)” 的相关文章

如何保留微信聊天记录,永久保存聊天记录的简单方法

怎么保存微信聊天记录?微信聊天记录实在是太多了,小李看着微信聊天记录一时间都不知道哪些是有用的那些没有用,直接删掉心里还是怕怕的,怎么办?小编告诉你,做个备份,...

学生应该怎么赚钱,大学生正规的赚钱方法

没有人会嫌钱多,大学生也一样,现在的大学生脑筋灵活,思维活跃,有创新、有胆识,所以也就不安于现状,不满足于父母所给的生活费,但是又不能给父母增添太多负担,也就只...

ocr数字识别原理(ocr文字识别快捷指令)

在COR文字识别技术没有广泛运用之前,各企事业单位业务办理都需要人工填写在纸张上,尤其是关键的证照内容,这种人工录入的方式不但费时,还容易出现差错,影响业务...

上海加盟店排行榜(现在最火的加盟店排名)

魔都上海,作为中国最大、经济最发达、最时尚的城市,是诸多餐饮新模式和业态的“试验田”,也是全国最成熟的餐饮市场之一。全国餐饮加盟品牌总部分布最多的城市、“网红品...

iphone新机上市时间及价格(苹果手机型号一览表)

本月苹果正式召开WWDC21大会,公布多款新系统更新。而在近期有外媒报道称,苹果iPhone13机型的认证信息出现在欧亚经济委员会(EEC)数据库中,数据公布了...

双十一后遗症尾款人被将一军(你中招了吗)

11月15日,家住上海的陈女士还没能完全收到自己在11月1日00:30付尾款的一套共计32片的面膜。“看直播下单,先在10月20日左右预付了50元订金,11月1...

产品经理职业生涯规划面试回答(超详解析其面试攻略)

凡事“预则立,不预则费”。即使你有丰富的产品经验,在面试那种紧张的环境下要面试好也不是一件易事,因为在那种环境下,你要对面试官提出的问题快速反映,快速组织语言,...

2019挑战杯大学生创业大赛,大学校园潜在的商机

“挑战杯”系列竞赛被誉为中国大学生科技创新创业的“奥林匹克”盛会,是目前国内大学生最关注最热门的全国性竞赛,也是全国最具代表性、权威性、示范性、导向性的大学生竞...

outlook无法登陆服务器(outlook邮箱服务器设置)

虽迟但到,2020年GitHub年度Octoverse报告终于在今天发布了。作为开发者社区最大的开源项目托管平台,Github的年度Octoverse报告能为我...

dx9修复工具怎么用(详解dx显示屏软件)

2017年底AMD发布最新版本驱动RadeonSoftwareAdrenalinEdition17.12(肾上腺素版),其中驱动包含大量新功能以及游戏性能提升。...