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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,156评论 19 139
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    他方l阅读 1,087评论 0 2
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    Yaoxue9阅读 1,349评论 0 6
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    HeroXin阅读 866评论 0 4
  • 清明节放假三天,加上还休一天,一场为期4天的假期就这样拉开了帷幕。 回家,一般是我放假的节奏,总感觉那里就是指引。...
    萌小李的成长阅读 200评论 0 0