node + fetch 实现跨域

这篇文章非科普文章，请确保您具备一定的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
  

      Content-Type: 向服务器说明我们发送的body是什么类型
  

  向老板说明待遇是很重要的
• 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