这篇文章非科普文章，请确保您具备一定的node和fetch知识。从认识fetch到实现跨域，笔者用了三天。现在把踩过的坑和成果记下。
前端fetch设置
fetch是比较基础的API，很多参数需要自家设置。在进行跨域POST请求时，有以下一个重要参数：
- method
指定请求方式，可选值：GET | POST | PUT | DELETE | OPTIONS。默认值：GET。 - credentials
指定在发送cookies的情况，可选值：omit | same-origin | include。 默认值：same-origin。
omit: 不发送cookies
same-origin: 在同域情况下发送cookies
include: 同域或跨域都发送cookies -
headers
Content-Type: 向服务器说明我们发送的body是什么类型
头文件，向服务器说明希望的到什么待遇，这里主要用到Content-Type
向老板说明待遇是很重要的 - body
要发送的内容
前端demo
var data = {
"value" : "here we go!!!!!!!!!",
"name" : "sssssssssssssss洒洒水da"
};
$(function(){
fetch('http://192.168.43.227:8000/login/account',{
method: "POST",
credentials: 'include',
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
}).then(function(response) {
return response.json();
}).then(
function(myBlob){
console.log(myBlob);
}
).catch(
function(error){
console.log(error)
}
)
});
后端node设置
解析工具body-parser
帮助开发者解析传入的body，如果没用解析工具，body是空值。
response头设置
- Access-Control-Allow-Origin
设置允许哪些外域访问此服务器。如果你要发送cookies，不要将其赋值为'*'。例如：http://www.jianshu.com | http://192.168.0.100:8000 - Access-Control-Allow-Methods
设置允许那些方法访问此服务器。可选值：PUT, GET, POST, DELETE, OPTIONS。 - Access-Control-Allow-Headers
设置允许那些头文件访问此服务器。可选值：Origin, X-Requested-With, Content-Type, Accept。 - Access-Control-Allow-Credentials
设置允许发送cookies。可选值：true,如果不允许就省略此字段。
后端demo
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
var jsonParser = bodyParser.json();
app.use( function(req, res, next) {
var origin = req.headers.origin;
console.log(origin);
res.header('Access-Control-Allow-Origin', origin);
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
res.header('Access-Control-Allow-Credentials', 'true');
next();
});
app.post("/login/account",jsonParser,(req,res) => {
console.log(req);
res.send({
status: 'ok',
currentAuthority:'admin',
});
});
const server = app.listen(8000,() => {
console.log('登录成功');
});
OK
