电商项目实战中篇09-跨域问题 跨区域电商

上一期咱们说到请求的问题，那么这一期咱们来说说跨域的问题：

跨域，什么是跨域呢？首先有着几种不同：

首先域名不同：比如说京东和淘宝，你要想在京东上面请求淘宝的接口，肯定是不通的

www.jd.com 与 www.taobao.com

然后是端口不同，你在服务器前端用的是80端口，服务器用的90端口，肯定是不通的

www.jd.com:8080 与 www.jd.com:8081

二级域名不一样，有一些二级域名就不一样，也存在跨域问题

item.jd.com 与 miaosha.jd.com

说明一点，跨域不是一个技术难题，其实是一个安全控制，这是浏览器对ajax的控制，一般来讲，只能控制ajax在同一个域名下请求，但是这个世界上的事情哪有那么巧呢？所以还是需要跨域的，而且很多应用都需要跨域，没有办法的。

介绍三种跨域请求方式：

jsonp：这个只能用get请求才行，非常古老，估计会被弃用

ngix反向代理，这个的话确实可以用很多请求方式，但是会增加一些额外配置，增加工作量。

cors：这个比较先进，支持多种请求，但是也会增加请求，降低系统性能。

下面来着重介绍cors的跨域过程，cors，全称跨域资源共享，目前的话，浏览器已经做了这个cors处理，服务端只需要用一下过滤器就行，判断请求头是否携带跨域信息，同时响应头进行响应即可。

说一下原理吧，有一点复杂，要是看不懂的话请私信，下面开始讲解原理，参考一下大神阮老师的文章，按照我的理解给大家讲出来，感谢传智李俊杰老师

对于ajax请求，浏览器分为两种：

1种是简单请求，1种是特殊请求

先说一下简单请求：

请求方式是这三种：head，get，post，这也是比较常见的三种哦

在请求的时候，Origin中会指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域。

这个时候就是服务端的事情了，服务端一般会返回这些东西

有接个地方需要注意：

• 服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。
• 浏览器发起ajax需要指定withCredentials 为true
• 响应头中的Access-Control-Allow-Origin一定不能为*，必须是指定的域名

这样就可以跨域了。

其实扯7扯8，这些都是原理，没有搞懂也没有关系，因为一般后端服务器框架早就做好了，你只需要加一个东西就可以了，请看图：

如果用的php，那么只要在路由后面加上这个allowcrossdomain就行了

下一章咱们接着搞技术，就是品牌的模块开发，这个模块会牵扯到品牌模块的增删改查，还有搜索，排序，弹框，父子组件传值，页面布局等，还有后台的接口开发，咱们下一章见！