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

来源：互联网发布：尤克里里调音器软件编辑：程序博客网时间：2024/06/05 08:03

cors的get跨域
- 1 目录结构
- 2 app90js
- 3 app99js
- 4 9099idxhtml
- 5 用node运行app90js和app99js
cors的post跨域
- 1 目录结构
- 2 app90js
- 3 app99js
- 4 9099idxhtml
- 5 用node运行app90js和app99js

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>

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

然后在浏览器打开
这里写图片描述

这里写图片描述

阅读全文

0 0