node作为中间层进行前后端分离

前言：

思考：

1. 前后端不分离的缺点？

 

 

Node作中间层做前后端分离

1. 前后端分离的定义

就是前端代码，和后端后端分开嘛。

2. 啊，怎么分开，那我直接cx把前端代码弄走吗？

咦，请求不了了，

XMLHttpRequest cannot load https://s103.ggwan.com/mainlinghitv2/css/trends.cs. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404.

无法加载https://s103.ggwan.com/mainlinghitv2/css/trends.cs XMLHttpRequest。在所请求的资源上没有“访问控制允许源站点”报头。因此，不允许源站点“null”访问。响应具有HTTP状态代码404。

（1）我们看看这个过程发生了什么

1、输入网址。 
2、浏览器查找域名的IP地址。 
3. 浏览器给web服务器发送一个HTTP请求 
4. 网站服务的永久重定向响应 
5. 浏览器跟踪重定向地址 现在，浏览器知道了要访问的正确地址，所以它会发送另一个获取请求。 
6. 服务器“处理”请求，服务器接收到获取请求，然后处理并返回一个响应。 
7. 服务器发回一个HTML响应 
8. 浏览器开始显示HTML （本地html文件直接从这开始）
9. 浏览器发送请求，以获取嵌入在HTML中的对象（就是所有带src属性都去下载）。在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件（就是href类的，就是相关的外部资源）。这些文件就包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等…

附上Src和href区别的链接：

http://www.jianshu.com/p/797bceab922b

（2）我们看看发送ajax的时候浏览器干了什么

 

 

步骤5：不允许跨域访问

站点null想访问https://s103.ggwan.com站点上的内容，结果报错。啊？为啥不能访问？

因为浏览器的同源策略

 

举个栗子 假设没有同源策略

 

 

结果就是张三知道了李四的密码，第二天从银行里把钱拿走了。

 

有了同源策略

 

 

 

跨域处理的方法

1. CORS

 

 

 

2. JSONP

 

 

3. websocket(该协议不受同源策略限制)

4. 用一个代理服务器访问后端服务（就是避免让浏览器去请求不同的域，让我们的服务器去请求，就不存在同源策略啦）

接下来，我们一起用node（express）来创建一个服务器吧

var app = express();

App.listen(8080);

这个app就是我们的代理服务器啦，用它可以管理我们的静态资源（就是我们的前端代码啊，html,css,js）

app.use(express.static(path.join(__dirname, '/')));

就是这一句话！！就是表示静态资源就在当前目录，然后express就会自己去找index.html啦

 

结合webapack

A: Webpack除了用来打包，还能在开发环境下作为一个node的服务器（webpack-dev-server）哦。

B:  哇，那你的意思是，webpack-dev-server就可以跨域访问资源咯？

A: 没错噢，只要简单的配置啦，请看代码

devServer:{

          historyApiFallback:true,

          hot:true,

          inline:true,

          progress:true,//报错无法识别，删除后也能正常刷新

          proxy: {//用devserver作跨域

            '/mainlinghitv2/css/trends.css': {

              target: 'https://s103.ggwan.com',//真正要请求的域名

              changeOrigin: true

            }

          }

      }

B: 就是说，我们在开发的时候，可以直接用webpack来调试接口就不用在本地搭建php(/java)的环境咯？

A: 是的哦

B: /哭笑 那为什么还要用node作中间层？

A: 因为webpack-dev-server是只能在开发环境运行的哦，webpack-dev-server生成的包并没有放在你的真实目录中,而是放在了内存中，就是说，webpack-dev-server不会生成html,js这些资源的目录里面，而这些静态文件在生产环境中是必须的，看下图

 

开发环境下

 

 

生产环境下，这个时候要放到后端的服务器环境上了，我们前端代码是作为静态资源的，这时候，问题来了，在webpack-dev-server生成包是在内存里面的，就是如果启动webpack-dev-server来跨域的话我们是没有办法提供打包好的静态文件给后端，那怎么办？那就用webpack直接打包咯，也就是用dev--server开发，用webpack-cli打包成静态文件上线

B: 也就是说，用了webpack-dev-server我们只是在开发环境下实现了前后端分离

A: 是的，生产环境下，我们其实也是同域访问的情况

B：就是说，上线的时候，又出现了前后端在一起的情况

 

Node作为中间层前后端分离