index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" class="search">
<input type="button" value="Click" class="submit">
</body>
<script>
var btn = document.querySelector('.submit');
var input = document.querySelector('.search');
btn.onclick = function () {
console.log(input.value)
fetch('http://localhost:8000/send', {
method: 'POST',
// mode: 'same-origin',
mode: 'no-cors', //默认跨域 格式为"content-Type":"text/pain"
body: "a=" + input.value + "&b=2&c=3",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
}).then(res => {
return res.json;
}).then(data => {
console.log(data);
}).catch(err => console.log(err));
}
// 使用原始的
// application / x - www - form - urlencoded,body需要是a = 1 & b=2 & c=3 格式,无法传递复杂多层次的对象
// fetch('/test/post', {
// headers: {
// "Content-Type": "application/x-www-form-urlencoded"
// },
// method: 'POST',
// body: "a=1&b=2&c=3"
// })
// 通过使用application / json ,可以直接传递JSON字符串,post复杂类型
// fetch('/test/post', {
// headers: {
// "Content-Type": "application/json"
// },
// method: 'POST',
// body: JSON.stringify({ a: 1, b: { c: 2, d: 3 } })
// })
</script>
</html>
转载:https://blog.csdn.net/isaisai/article/details/78205376
app.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.listen(8000, function () {
console.log('server running on port: 8000');
});
app.get('/index', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
app.post('/send', function (req, res) {
console.log(req.body);
res.send(req.body).end();
});
page.json
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.18.3",
"express": "^4.16.4"
}
}
设置允许所有域名跨域:
app.all("*",function(req,res,next){
//设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin","*");
//允许的header类型
res.header("Access-Control-Allow-Headers","content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == 'options')
res.send(200); //让options尝试请求快速结束
else
next();
}
设置允许指定域名“http://www.zhangpeiyue.com”跨域:
app.all("*",function(req,res,next){
//设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin","http://www.zhangpeiyue.com");
//允许的header类型
res.header("Access-Control-Allow-Headers","content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == 'options')
res.send(200); //让options尝试请求快速结束
else
next();
}
设置允许多个域名跨域:
app.all("*",function(req,res,next){
if( req.headers.origin.toLowerCase() == "http://www.zhangpeiyue.com"
|| req.headers.origin.toLowerCase() =="http://127.0.0.1" ) {
//设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin", req.headers.origin);
}
//允许的header类型
res.header("Access-Control-Allow-Headers", "content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == 'options')
res.send(200); //让options尝试请求快速结束
else
next();
}
如果允许的域名较多,可以将允许跨域的域名放到数组当中:
app.all("*",function(req,res,next){
var orginList=[
"http://www.zhangpeiyue.com",
"http://www.alibaba.com",
"http://www.qq.com",
"http://www.baidu.com"
]
if(orginList.includes(req.headers.origin.toLowerCase())){
//设置允许跨域的域名,*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin",req.headers.origin);
}
//允许的header类型
res.header("Access-Control-Allow-Headers", "content-type");
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == 'options')
res.send(200); //让options尝试请求快速结束
else
next();
}
————————————————
版权声明:本文为CSDN博主「张培跃吧」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u012149969/article/details/81145144