跨域问题解决办法之一:proxyTable

解决跨域问题

问题一:为什么会有跨域问题

浏览器的同源策略不允许跨域访问
同源策略:指协议,域名,端口相同.

问题二:解决思路有什么?

既然浏览器不能跨域访问,那么跨域使用后台服务访问吗?
可以!

问题三:怎么让后台服务访问代替浏览器访问

使用proxyTable解决

问题四:什么是proxyTable?

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

cms跨域解决原理是什么?

1.访问页面http://localhost:11111/
2.页面请求http://localhost:11111/cms
由于url由http://localhost:33333/cms…改为"http://localhost:11111/cms",所以不会存在跨域问题
3、通过proxyTable由node服务器代理请求 http://localhost:33333/cms.
服务端不存在跨域问题
具体配置如下:
1.修改api方法中的url的定义
请求前加/api前缀

//public是对axios的工具类封装，定义了http请求方法 
import http from './../../../base/api/public'
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;
export const page_list = (page,size,params) => {
	return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size)
}

2.在config/index.js下配置proxyTable
让以/api/cms开头的请求全部代理请求http://localhost:33333

'/api/cms': {
	target: 'http://localhost:31001',
	pathRewrite: {
		'^/api': ''//实际请求去掉/api        
 }