黑马程序员技术交流社区

标题: 同源策略 [打印本页]

---

作者: 810296276    时间: 2019-9-10 14:49
标题: 同源策略
.3.1 同源策略

概述: 同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支JavaScript的浏览器都会使用这个策略

目的: 为了保证用户信息安全，浏览器使用同源策略。

表现形式:

• ​        协议相同（http、https等） ​        域名相同（baidu.com,qq.com,localhost） ​        端口相同（80、8080等）
  

[td]

服务名	服务地址	协议	域名	端口号
微服务xc-service-manage-cms	http://localhost:31001/cms/page/list/1/10	http	localhost	31001
cms前端工程服务	http://localhost:11000/#/cms/page/list	http	localhost	11000

从上面列表中我们可以看到，两个服务的端口好不一致，这个时候浏览器的同源策略会限制接口地址的访问。出现报错现：Access-Control-Allow-Origin。

那么如何解决呢？

这个时候vue-cli给出了解决方案，采用proxyTable解决浏览器同源策略的问题。

3.3.2 proxyTable

​        vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了http-proxy-middleware（https://github.com/chimurai/http-proxy-middleware），它是http代理中间件，它依赖node.js，基本原理是用服务端代理解决浏览器跨域。

浏览器跨域访问失败：

使用proxyTable来请求数据并返回：

cms跨域解决原理：

1、访问页面http://localhost:11000/

2、页面请求http://localhost:11000/cms

​        由于url由http://localhost:31001/cms...改为“http://localhost:11000/cms."，所以不存在跨域

3、通过proxyTable由nodejs服务器代理请求 http://localhost:31001/cms，服务端不存在跨域问题

3.3.2 使用proxyTable完成跨域请求

代码具体的配置如下：

1）修改cms.js中page_list方法url的地址

请求前加标识前缀

//public是对axios的工具类封装，定义了http请求方法
import http from './../../../base/api/public'​//导入标识前缀的统一配置文件sysConfig.jslet sysConfig = require('@/../config/sysConfig')let apiUrl = sysConfig.xcApiUrlPre;//调用前缀的标识  ​export const page_list = (page,size,params) => {  //对微服务的地址修改，添加调用前缀的标识   return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size)}

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2