Node.js 三层架构 和 同源策略及跨域

三层架构

表示层:路由层，主要对用户的请求接受，以及数据的返回，直接和浏览器连接

业务逻辑层：service层，主要负责对数据层（dao）的操作。也就是说把一些数据层的操作进行组合。

数据访问层：dao层，看数据层里面有没有包含逻辑处理，直接对数据进行某个操作。

流程：

dao层的方法暴露给service进行处理，然后暴露给路由层进行分发处理，然后暴露给入口文件使用。

同源策略及跨域

数据通过异步请求的三种方式

直接通过http://127.0.0.1:3000/xxxx.html就可以，前面两种需要先引入包，第二种（axios）是常用的

  // jquery 使用ajax
    $.ajax({
        url: 'http://127.0.0.1:3000/user/',
        type: 'get',
        success: function(res){
            console.log(res);
        }
    })


    //axios 使用ajax  前后端都可以使用，第三方方法
    axios.get('http://127.0.0.1:3000/user/').then(function(resp){
        console.log(resp);
    });

    //fetch api 使用ajax 只能使用于浏览器端
    fetch('http://127.0.0.1:3000/user/').then(function(resp){
        resp.json().then(function(data){
            console.log(data);
        })
    });

概念：

所谓同源是指：域名、协议、端口相同，为了保障安全性。

比如，服务器域名为：http://www.baidu.com/file/index.html

URL	结果	原因
http://www.yanhongzhi.com/other/index.htmlbaidu.http://www.yanhongzhi.com/other/index.html	成功	域名、协议、端口相同
https://www.yanhongzhi.com/home/index.htmlbaiduhttps://www.yanhongzhi.com/home/index.html	失败	协议不同
http://www.yanhongzhi.com:8080/home/index.htmlbaiduhttp://www.yanhongzhi.com:8080/home/index.html	失败	端口不同
http://www.yanhongzhi.cn/home/index.htmlbaiduhttp://www.yanhongzhi.cn/home/index.html	失败	域名不同

 

解决同源

同源问题是由于浏览器引起的，有三种方式解决。

1、JSONP

jsonp本身和ajax等等这些无关，仅仅就是针对跨域的一种页面解决方案而已。

由于 script 标签不受浏览器同源策略的影响，允许跨域引用资源。因此可以通过动态创建 script 标签，然后利用 src 属性进行跨域，这也就是 JSONP 跨域的基本原理。

JSONP需要前台和后台代码配合。

直接通过下面的例子来说明 JSONP 实现跨域的流程：

前台设置

后台设置

 

 

 

在页面通过http://localhost:3000/cors.html访问，会得到访问数据，结果里面的data就是具体数据。

代码：

let jsonstr = JSON.stringify(result);
    const script = `callback(${jsonstr})`;
    res.header("content-type","application/javascript").send(script);

2、CORS（跨域资源共享）

总体思路：

如果浏览器要跨域访问服务器的资源，需要获得服务器的允许

CORS中间件

1、后台安装。

npm i cors

2、入口文件引入并使用。

const cors = require("cors");
app.use(cors());

 

3、直接服务器后端连接，前后端服务器分离（常用）