详解vue或uni-app的跨域问题解决方案

　　

<强>
　　

　　

<>强服务器端解决方案
　　

　　

服务器告诉浏览器:你允许我跨域
　　

　　

具体如何告诉浏览器,请看:

　　 　　//告诉浏览器,只允许http://bb.aaa.com: 9000这个源请求服务器 　　美元反应→头(Access-Control-Allow-Origin, http://bb.aaa.com: 9000);//告诉浏览器,请求头里只允许有这些内容 　　美元反应→头(“Access-Control-Allow-Headers”,“授权、内容类型、深度、用户代理、X-File-Size X-Requested-With, X-Requested-By, if - modified - since, X-File-Name, X-File-Type, cache - control,起源”);//告诉浏览器,只允许暴露“授权、认证”这两个字段 　　美元反应→头(“Access-Control-Expose-Headers”、“授权、身份验证”);//告诉浏览器,只允许GET、POST、补丁,说,选择方法跨域请求 　　美元反应→头(“Access-Control-Allow-Methods”,“GET、POST、补丁、PUT选项”);//预检 　　美元反应→头(Access-Control-Max-Age, 3600); 　　之前 　　 　　

将以上代码写入中间件:

　　 　　///app/Http/中间件/Cors.php 　　& lt; & # 63; php 　　名称空间的应用程序\ Http \中间件; 　　 　　使用闭包; 　　使用说明\ Http \反应; 　　类歌珥{/* * 　　*处理传入的请求。 　　* 　　* @param \照亮\ Http请求\ $请求 　　* @param \闭包一美元 　　* @return混合 　　*/公共函数处理(关闭请求时,美元未来美元) 　　{ 　　响应=下一美元($请求);//告诉浏览器,只允许http://bb.aaa.com: 9000这个源请求服务器 　　美元反应→头(Access-Control-Allow-Origin, http://bb.aaa.com: 9000);//告诉浏览器,请求头里只允许有这些内容 　　美元反应→头(“Access-Control-Allow-Headers”,“授权、内容类型、深度、用户代理、X-File-Size X-Requested-With, X-Requested-By, if - modified - since, X-File-Name, X-File-Type, cache - control,起源”);//告诉浏览器,只允许暴露“授权、认证”这两个字段 　　美元反应→头(“Access-Control-Expose-Headers”、“授权、身份验证”);//告诉浏览器,只允许GET、POST、补丁,说,选择方法跨域请求 　　美元反应→头(“Access-Control-Allow-Methods”,“GET、POST、补丁、PUT选项”);//预检 　　美元反应→头(Access-Control-Max-Age, 3600); 　　返回$响应; 　　} 　　 　　} 　　 　　之前 　　 　　

在路由上添加跨域中间件,告诉客户端:服务器允许跨域请求

　　 　　 　　美元api→集团([“中间件”=祝辞歌珥,“前缀”=祝辞'医生'],函数($ api) { 　　api→美元get(“用户信息”,Http \控制器\ api \ \ App \ UsersController::类。“@show”); 　　 　　}) 　　之前 　　 　　


　　

　　

欺骗浏览器,让浏览器觉得你没有跨域(其实还是跨域了,用的是代理)
　　

　　

在manifest.json里添加如下代码:

　　 　　//manifest.json 　　" devServer ": { 　　“端口”:9000年, 　　“disableHostCheck”:没错, 　　"代理":{ 　　“/api/doc”: { 　　“目标”:“http://www.baidu.com”, 　　“changeOrigin”:没错, 　　“安全”:假的 　　}， 　　"/api2 ": { 　　… 　　} 　　}， 　　 　　}， 　　之前 　　 　　


　　

　　

<强>/api/doc的
　　

　　

捕获API的标志,如果API中有这“/API/doc”个字符串,那么就开始匹配代理,
　　比如API请求“/API/doc/用户信息”,
　　会被代理到请求“http://www.baidu.com/api/doc”
　　即:将匹配到的“/api/doc”替换成“http://www.baidu.com/api/doc”
　　客户端浏览器最终请求链接表面是:“http://192.168.0.104:9000/api/doc/用户信息”,
　　实际上是被代理成了:“http://www.baidu.com/api/doc/userinfo”去向服务器请求数据
　　

　　

<强>目标
　　

　　

代理的API地址,就是需要跨域的API地址。
　　地址可以是域名,如:http://www.baidu.com
　　也可以是IP地址:http://127.0.0.1:9000
　　如果是域名需要额外添加一个参数changeOrigin:真的,否则会代理失败。
　　

　　

<强> pathRewrite
　　

　　

路径重写,也就是说会修改最终请求的API路径。
　　比如访问的API路径:/API/doc/用户信息,
　　设置pathRewrite: {^/api:”后,}
　　最终代理访问的路径:“http://www.baidu.com/doc/userinfo”,
　　将“api”用正则替换成了空字符串,
　　这个参数的目的是给代理命名后,在访问时把命名删除掉。

详解vue或uni-app的跨域问题解决方案