|
.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)}
| 
收藏
淘帖
踩
