express开启cors跨域

express开启cors跨域

express开启cors跨域

nodejs(15)express开启cors跨域-LMLPHP

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跨域-LMLPHP

04-06 00:36