22-CMS前端页面查询开发-Api调用-跨域解决

跨域问题解决

测试上边的代理，结果报错如下：
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:11000’ is therefore not allowed access.
原因：浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同。
解决：采用proxyTable解决。

proxyTable是什么？

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

cms跨域解决原理：
1、访问页面http://localhost:11000/
2、页面请求http://localhost:11000/cms
由于url由http://localhost:31001/cms…改为“http://localhost:11000/cms."，所以不存在跨域 3、通过proxyTable由node服务器代理请求 http://localhost:31001/cms.
服务端不存在跨域问题
具体的配置如下：
1）修改api方法中url的定义请求前加/api前缀
2）在conﬁg/index.js下配置proxyTable。以/api/cms开头的请求，代理请求http://localhost:31001
服务端不存在跨域问题
具体的配置如下：
1）修改api方法中url的定义请求前加/api前缀

import http from '@/base/api/public'
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;//  /api/*页面列表*/
export const page_list = (page,size,params) => {//params为json格式return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size+'/')
}

创建cms.js文件

–前端请求return http.requestQuickGet(apiUrl+’/cms/page/list/’+page+’/’+size+’/’)
–请求的是/api/cms/page/list/1/10这个地址携带api
–export const page_list为何加export ：因为最终都要打包，所以把这个方法进行导出，所以前边添加export
–http.requestQuickGet里的http就是import http from '@/base/api/public’里的http

看public文件

public .js封装了get请求、post请求等请求方式
推荐使用requestQuickGet。因为requestGet需要携带一些config配置信息

在配置文件中定义了路由前缀/api

当请求请求的是/api/cms/page/list/1/10，
因为配置了’/api/cms’: {
匹配到/api/cms
因为配置了target: ‘http://localhost:31001’
就把这个请求地址转向http://localhost:31001/api/cms/page/list/1/10,
因为配置了pathRewrite: {
‘^/api’: ‘’//将api变为空字符串
}
将http://localhost:31001/api/cms/page/list/1/10变为http://localhost:31001/cms/page/list/1/10
所以最终node.js服务器请求的是http://localhost:31001/cms/page/list/1/10接口

导入请求api

模板请求api接口

分页查询

分析：

http类库，可以向服务端发起http请求