express和cors跨域
使用express框架:
Express:
Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能。
Express 框架核心特性:
可以设置中间件来响应 HTTP 请求。
定义了路由表用于执行不同的 HTTP 请求动作。
可以通过向模板传递参数来动态渲染 HTML 页面。
首先要安装nodeJs环境
安装 npm install express --save-dev
以上命令会将 Express 框架安装在当前目录的 node_modules 目录中, node_modules 目录下会自动创建 express 目录。以下几个重要的模块是需要与 express 框架一起安装的:
body-parser - node.js 中间件,用于处理 JSON, Raw, Text 和 URL 编码的数据。
cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie,并把它们转成对象。
multer - node.js 中间件,用于处理 enctype="multipart/form-data"(设置表单的MIME编码)的表单数据。
cnpm install body-parser --save
cnpm install cookie-parser --save
cnpm install multer --save
查看express的版本号:cnpm list express
引入express
const express = require('express')
const app = express()
let bodyParser = require("body-parser");
express-generator
express-generator可以快速的帮我们搭建项目
全局安装 cnpm install express-generator -g
局部安装express cnpm install express --save-dev
创建项目:
npm init -y
express -e
npm install
Hello World
server.js
var express = require("express");
var app = express();
app.get("/",(req,res)=>{
res.send("hello World");
}) ;
app.listener(8081,()=>{});
运行 node server.js
访问 http://localhost:8081/
express 应用使用回调函数的参数: request 和 response 对象来处理请求和响应的数据。
Request 对象 - request 对象表示 HTTP 请求,包含了请求查询字符串,参数,内容,HTTP 头部等属性。常见属性有:
req.app:当callback为外部文件时,用req.app访问express的实例
req.baseUrl:获取路由当前安装的URL路径
req.body / req.cookies:获得「请求主体」/ Cookies
req.fresh / req.stale:判断请求是否还「新鲜」
req.hostname / req.ip:获取主机名和IP地址
req.originalUrl:获取原始请求URL
req.params:获取路由的parameters
req.path:获取请求路径
req.protocol:获取协议类型
req.query:获取URL的查询参数串
req.route:获取当前匹配的路由
req.subdomains:获取子域名
req.accepts():检查可接受的请求的文档类型
req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages:返回指定字符集的第一个可接受字符编码
req.get():获取指定的HTTP请求头
req.is():判断请求头Content-Type的MIME类型
nodemon
nodemon用来监视node.js应用程序中的任何更改并自动重启服务,非常适合用在开发环境中。
nodemon将监视启动目录中的文件,如果有任何文件更改,nodemon将自动重新启动node应用程序。
全局安装
npm install -g nodemon
本地安装
npm install --save-dev nodemon
启动应用
nodemon [your node app]
Cors:
cnpm install express body-parser --save-dev
server.js
//JavaScript Document
let express = require("express");
let app = express();
app.listen(3000, () => console.log("Http server is running at http://127.0.0.1:3000/")); app.use(express.static(__dirname)); let bodyParser = require("body-parser");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.raw());
app.use(bodyParser.text());
//需要跨域的url
let allowOrigin = [
"http://127.0.0.1:8080/",
"http://127.0.0.1:3000/"
]; app.use((request, response, next) => {
let {origin} = request.headers;
if(allowOrigin.includes(origin)) {
response.setHeader("Access-Control-Allow-Origin", origin);
response.setHeader("Access-Control-Allow-Credentials", true);
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, HEAD, DELETE, OPTIONS");
response.setHeader("X-Powered-By", "3.2.1");
if(request.method.toUpperCase() == "OPTIONS") {
response.statusCode = 204;
response.end();
}
}
next();
}); app.use("/", require("./router")); app.all("*", (request, response) => {
response.sendStatus(404);
});
router/index.js
let express = require("express");
let router = express.Router();
router.use("/index", require("./router"));
module.exports = router;
router/router/index.js
let express = require("express");
let router = express.Router();
router.post("/login",(req,res)=>{
res.send("你好");
});
module.exports = router;
在package的scripts里添加:"serve":"node server.js"
运行:npm run serve
express和cors跨域的更多相关文章
- nodejs(15)express开启cors跨域
express开启cors跨域 package.json "dependencies": { "body-parser": "^1.18.3" ...
- 用express实现CORS跨域(上-简单请求)
今天遇到了一个跨域请求登录验证的问题.所以有了尝试跨域的机会. 具体情景是,有一个登录界面写在名叫cas的站点上,但是相关的登录验证的后台接口是写在名叫earth的站点. 首先的反应是使用jsonp, ...
- CORS跨域资源共享你该知道的事儿
"唠嗑之前,一些客套话" CORS跨域资源共享,这个话题大家一定不陌生了,吃久了大转转公众号的深度技术好文,也该吃点儿小米粥溜溜胃里的缝儿了,今天咱们就再好好屡屡CORS跨域资源共 ...
- CORS跨域-Nginx使用方法(Access-Control-Allow-Origin错误提示)
问题说明 当出现上图这个的时候,是访问请求外域URL无法访问,浏览器认为访问外域URL不安全,导致访问不了简称跨域问题.而这上面出现一句很重要的话“NO Access-Control-Allow-Or ...
- 如何在ASP.NET Core中实现CORS跨域
注:下载本文的完整代码示例请访问 > How to enable CORS(Cross-origin resource sharing) in ASP.NET Core 如何在ASP.NET C ...
- ajax——CORS跨域调用REST API 的常见问题以及前后端的设置
RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前 ...
- Web APi之手动实现JSONP或安装配置Cors跨域(七)
前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...
- Web API 实现JSONP或者安装配置Cors跨域
前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...
- CORS 跨域 实现思路及相关解决方案
本篇包括以下内容: CORS 定义 CORS 对比 JSONP CORS,BROWSER支持情况 主要用途 Ajax请求跨域资源的异常 CORS 实现思路 安全说明 CORS 几种解决方案 自定义CO ...
随机推荐
- 第48章 UserInfo端点(UserInfo Endpoint) - Identity Server 4 中文文档(v1.0.0)
UserInfo端点可用于检索有关用户的身份信息(请参阅规范). 调用者需要发送代表用户的有效访问令牌.根据授予的范围,UserInfo端点将返回映射的声明(至少需要openid作用域). 示例 GE ...
- Java对Excel数据处理(利用POI解析Excel)
前言 研究生复试结束我在学校官网上看到了全校按姓氏排列的拟录取名单,但是官网并没有给出每个人的专业,只有学号,另外还知道本专业的复试名单,所以我想知道对于本专业的拟录取名单.具体做法就是,扫描复试名单 ...
- 设计模式之Factory模式 代码初见
ObjectFactory就是通过Factory建造一个Object,比如说DBConnectionFactory就是专门建造DBConnection的工厂 BuilderFactory就是通过Fac ...
- WebUploader点击上传文件选择框会延迟几秒才会显示
accept: { title: 'Images', extensions: 'jpg,jpeg,png', mimeTypes: 'image/*' } 改为 accept: { title: 'I ...
- vue动画及其原理
1,vue动画的实现原理,主要是通过在不同时期给需要动画的dom元素加上css动画样式 我们以显示和隐藏动画为例 a, 需要动画的dom元素 b,点击时vue控制往vue中加的样式 2, 我们以两张 ...
- 转载: ssh连接上华为云Linux服务器,一会就自动断开
原文链接:https://www.cnblogs.com/mspeer/p/9907734.html 客户端向服务端发送心跳 依赖 ssh 客户端定时发送心跳,putty.SecureCRT.XShe ...
- 前后端分离djangorestframework—— 接入支付宝支付平台
支付宝 简介 支付宝是什么不用多说了,本次教程适合初学者 前提准备 话不多说,干就完了 1.注册开发者账号,设置公钥私钥 首先进入支付宝开发者平台:传送门 ,有账号直接登录,没账号用你平时用来付款收钱 ...
- js调用浏览器打印指定div内容
--打印按钮事件 function printForm(){ var headstr = '<html xmlns:th="http://www.thymeleaf.org&qu ...
- 基于 PHP 的数据爬取(QueryList)
基于PHP的数据爬取 官方网站站点 简单. 灵活.强大的PHP采集工具,让采集更简单一点. 简介: QueryList使用jQuery选择器来做采集,让你告别复杂的正则表达式:QueryList具有j ...
- 4.机器学习——统计学习三要素与最大似然估计、最大后验概率估计及L1、L2正则化
1.前言 之前我一直对于“最大似然估计”犯迷糊,今天在看了陶轻松.忆臻.nebulaf91等人的博客以及李航老师的<统计学习方法>后,豁然开朗,于是在此记下一些心得体会. “最大似然估计” ...