使用node的express框架进行基于cors的get和post跨域

最新推荐文章于 2024-08-17 15:32:49 发布

kingov

最新推荐文章于 2024-08-17 15:32:49 发布

阅读量1.6k

点赞数

分类专栏： 5 Node.Js 文章标签： express

本文链接：https://blog.csdn.net/kingov/article/details/77405759

版权

5 Node.Js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

cors的get跨域
cors的post跨域

1 cors的get跨域

1.1 目录结构

这里写图片描述

1.2 app90.js

var express = require('express')
var cors = require('cors')
var app = express()

app.get('/crosData', cors(), function (req, res, next) {
  res.json({msg: '这个数据来自9090端口'})
})


app.listen(9090, function () {
  console.log('http://127.0.0.1:9090')
})

1.3 app99.js

var express = require('express')
var app = express()
var fs = require('fs')

app.get('/',function (req, res, next) {
  fs.readFile('./idx.html' , 'utf-8' , (err,data)=>{
    res.send( data );
  })
})

app.listen(9010, function () {
  console.log('http://127.0.0.1:9010')
})

1.4 /9099/idx.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>按钮</title>
</head>
<body>

    <button id="btn">跨域</button>
<script>
    var btn = document.getElementById('btn');

    btn.onclick = function(){
        var xhr = new XMLHttpRequest();
        xhr.open( 'get' , 'http://127.0.0.1:9090/crosData' );
        xhr.send(null);
        xhr.onreadystatechange = function(){
            if( xhr.status == 200 && xhr.readyState == 4 ){
                console.log( xhr.responseText );
            }
        }
    }
</script>
</body>
</html>

1.5 用node运行app90.js和app99.js

然后在浏览器打开

这里写图片描述

2 cors的post跨域

2.1 目录结构

这里写图片描述

2.2 app90.js

var express = require('express')
var cors = require('cors')
var app = express()
var bodyParser = require('body-parser')

app.use(bodyParser.urlencoded({
  extended: true
}));

app.post('/crosData', cors(), function (req, res, next) {
  res.json({msg: req.body })
})


app.listen(9090, function () {
  console.log('http://127.0.0.1:9090')
})

2.3 app99.js

var express = require('express')
var app = express()
var fs = require('fs')

app.get('/',function (req, res, next) {
  fs.readFile('./idx.html' , 'utf-8' , (err,data)=>{
    res.send( data );
  })
})

app.listen(9010, function () {
  console.log('http://127.0.0.1:9010')
})

2.4 /9099/idx.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>按钮</title>
</head>
<body>

    <button id="btn">跨域</button>
<script>
    var btn = document.getElementById('btn');

    btn.onclick = function(){
        var xhr = new XMLHttpRequest();
        xhr.open( 'post' , 'http://127.0.0.1:9090/crosData' );
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
        xhr.send("name=tom&addr=usa");
        xhr.onreadystatechange = function(){
            if( xhr.status == 200 && xhr.readyState == 4 ){
                console.log( xhr.responseText );
            }
        }
    }
</script>
</body>
</html>