express开启cors跨域

package.json

  "dependencies": {
    "body-parser": "^1.18.3",
    "cors": "^2.8.5",
    "express": "^4.16.4",
    "jquery": "^3.3.1"
  }

app.js

// 导入 express 模块
const express = require('express')

// 创建 express 的服务器实例
const app = express()

// 配置 body-parser 解析表单数据【也需要在路由之前注册】
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))

// 在路由之前,注册 cors 中间件
const cors = require('cors')
app.use(cors())

// 添加用户的 路由/API
app.post('/adduser', (req, res) => {
  const reqBody = req.body
  res.send({ status: 200, msg: '添加用户成功!', data: reqBody })
  console.log(reqBody)
})

// 调用 app.listen 方法,指定端口号并启动web服务器
app.listen(3001, function() {
  console.log('Express server running at http://127.0.0.1:3001')
})

index.html

  <!-- 导入 Jquery -->
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>

  <button id="btnPost">发起Post提交</button>

  <script>
    $(function () {
      $('#btnPost').on('click', function () {
        $.ajax({
          url: 'http://127.0.0.1:3001/adduser',
          data: { name: 'houfee', age: 24 },
          type: "POST",
          dataType: 'json',
          success: function (result) {
            console.log(result)
          }
        })
      })
    })
  </script>

chrome测试结果

nodejs(15)express开启cors跨域的更多相关文章

  1. spring boot / cloud (六) 开启CORS跨域访问

    spring boot / cloud (六) 开启CORS跨域访问 前言 什么是CORS? Cross-origin resource sharing(跨域资源共享),是一个W3C标准,它允许你向一 ...

  2. express和cors跨域

    使用express框架: Express: Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能. Express 框架核 ...

  3. 用express实现CORS跨域(上-简单请求)

    今天遇到了一个跨域请求登录验证的问题.所以有了尝试跨域的机会. 具体情景是,有一个登录界面写在名叫cas的站点上,但是相关的登录验证的后台接口是写在名叫earth的站点. 首先的反应是使用jsonp, ...

  4. SpringBoot解决cors跨域问题

    1.使用@CrossOrigin注解实现 (1).对单个接口配置CORS @CrossOrigin(origins = {"*"}) @PostMapping("/hel ...

  5. CORS跨域资源共享你该知道的事儿

    "唠嗑之前,一些客套话" CORS跨域资源共享,这个话题大家一定不陌生了,吃久了大转转公众号的深度技术好文,也该吃点儿小米粥溜溜胃里的缝儿了,今天咱们就再好好屡屡CORS跨域资源共 ...

  6. jsonp与cors跨域的一些理解(转)

    CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而这种访问是被同源策略所禁止的. ...

  7. CORS跨域-Nginx使用方法(Access-Control-Allow-Origin错误提示)

    问题说明 当出现上图这个的时候,是访问请求外域URL无法访问,浏览器认为访问外域URL不安全,导致访问不了简称跨域问题.而这上面出现一句很重要的话“NO Access-Control-Allow-Or ...

  8. Api之Cors跨域以及其他跨域方式

    Web Api之Cors跨域以及其他跨域方式(三)   我们知道ajax不能跨域访问,但是有时我们确实需要跨域访问获取数据,所以JSONP就此诞生了,其本质使用的是Script标签,除JSONP以外还 ...

  9. 关于CORS跨域问题的理解

    起因 因为这段时间一个项目前后端分别部署在不同服务器的需要,抽空学习了一下CORS问题,不足之处,欢迎指教. 什么是CORS CORS是一个w3c标准,全称是"跨域资源共享"(Cr ...

随机推荐

  1. 把自己的项目发布到maven仓库并在maven和gradle中开始使用

    把自己的项目发布到maven仓库并在maven和gradle中开始使用 上一条博客中提到的日志打印项目总算是维护的差不多了, 不过现在使用它还是打成jar包放到其他项目内, 所以决定把项目传到mave ...

  2. ARGB 颜色取值与透明度搭配

    ARGB 依次代表透明度(alpha).红色(red).绿色(green).蓝色(blue). #FF99CC00 为例,其中,FF 是透明度,99 是红色值, CC 是绿色值, 00 是蓝色值. 1 ...

  3. Font Awesome可缩放的矢量图标

    我感觉图标还行~~~这里是我修改过的,自己根据需要修改即可~~ 网址: http://fontawesome.dashgame.com/ 使用: <link rel="styleshe ...

  4. Javascript获取当前鼠标在元素内的坐标定位

    代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-play-circle

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  6. Window Server 2019 配置篇(7)- 利用脚本创建OU,组和用户

    好的,服务器到上一步为止,基本的雏形已经确立了,接下来我们要完善一些细节 打开AD-admin服务器,创建一个脚本,要求能够从csv文件中读出数据并建立OU,组和用户,以及他们的密码 这里有一个参考的 ...

  7. JumpServer简单使用

    笔记内容:简单使用jumpserver笔记日期:2018-01-22 23.9 创建jumpserver普通用户 23.10 添加机器 23.11 添加系统用户并授权 23.12 添加授权规则 23. ...

  8. [百度之星]资格赛:IP聚合

    保持着也不知道什么情怀,觉得到现在才能发出来.这道题做完之后看了其他人的代码,然后再看我的,不得不说,真是幼稚的很,尤其是输入这一块,都什么跟什么啊. 但相较于之前来说,不像以前慌张了,学会先思考再去 ...

  9. php.basic.functions

    array_unshift call_user_func_array闭包 下面是学院的代码 class Container { protected $binds; protected $instanc ...

  10. thinkphp调用sqlserver储存过程返回多个结果集

    首先安装扩展 windows 分为两个步骤 找到对应自己PHP版本的pdo扩展,下载解压出来,并且在php.ini里面启用扩展,需要注意的问题是php版本以及是否为安全版本 下载 ODBC Drive ...