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

柔光的暖阳◎ 2022-03-25 10:14 313阅读 0赞

# 解决跨域问题 #

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

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

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

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

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

使用proxyTable解决

## 问题四:什么是proxyTable? ##

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

## cms跨域解决原理是什么? ##

1.访问页面http://localhost:11111/  
2.页面请求http://localhost:11111/cms  
由于url由http://localhost:33333/cms…改为"[http://localhost:11111/cms][http_localhost_11111_cms]",所以不会存在跨域问题  
3、通过proxyTable由node服务器代理请求 [http://localhost:33333/cms][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        
     }

[https_github.com_chimurai_http-proxy-middleware]: https://github.com/chimurai/http-proxy-middleware
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODE1MTIy_size_16_color_FFFFFF_t_70]: /images/20220325/aa4b41279e614de7831e195f80a4d4f6.png
[http_localhost_11111_cms]: http://localhost:11111/cms
[http_localhost_33333_cms]: http://localhost:33333/cms