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
然后在浏览器打开