关于vue生产环境跨域的踩过的坑和解决方案
关于vue跨域的踩过的坑和解决方案前提(需求)开发环境生产环境前提(需求)最近做一个功能需要请求三方资源.json文件,因为之前用jquery的时候使用ajax-jsonp很容易就get到了数据,但是我发现请求三方接口和三方资源还是有区别的,无论vue-json和jquery我都在vue项目里面尝试(即使原理都是jsonp)但是chorme浏览器都会告诉你资源请求被锁定,这是浏览器的安全策略...
前提(需求)
解决方法:1、ngnix代理,2、后端请求资源 3、强大的说服能力
开发环境
找不到问题就百度,Google,发现网上的答案千篇一律,通过vue-cli脚手架搭建的项目会有一个config-index.js,添加proxyTable重写url来访问资源,试问在场的那个靓仔不知道?但是我得吐槽一下
- 开发环境是有本地服务的,也就是说你的本地服务就是一个服务器;
- build打包的dist文件是静态资源,放在服务器上是还是静态资源,客户端运行的只是浏览器支持的JS脚本文件而已;
- 上传后发现你之前配置的proxyTable的接口请求都是404;
- 如果我做开发不是为了上线,那我在干嘛?闹着玩吗?
- 第四点是我发给那些只发开发环境跨域解决方案的睿智博主们的;
- 本文重点不在开发环境,上面五条千万别看;
dev环境下你配置了代码如下,开发环境跨域是没问题了
假设请求资源:http://tencent.com/test.json
proxytable代码如下:
proxyTable: {
'/tencent': {//这是标识!!!!!!!
target: 'http://tencent.com',//三方接口地址域名
changeOrigin: true,//是否允许跨域
pathRewrite: {
'^/tencent': '',//根据标识重写!!!!!!!
}
}
},
代码请求如下
axios
.get("/tencent/test.json") //注意这个/tencent就是上面设置的标识!!!!!!!
.then(res => {
console.log(res);
})
.catch(error => {
console.warn(error);
});
重启服务npm run dev,本地已经可以获取到数据了,如果不行,建议拍两下电脑;
生产环境
1.nginx代理(以下请求地址都是瞎编,请勿复制,用你自己的)
开始配置nginx
编辑nginx.conf,加上下面这一条,看不懂你把这个代码改成自已需要的然后直接贴给运维,人家30秒就能搞定
location ^~ /tencent/ {
proxy_pass http://tencent.com/;//最好先用http而不是https,
//如果服务器有ssl证书配置当我没说
}
测试并重启nginx服务
cd /usr/local/nginx/sbin
./nginx -t //测试通过了在重启别一天天的自信重启还找不到问题
./nginx -s reload
然后打包上线
2、后端请求资源
这个很容易理解了,后端专门写一个获取三方资源的接口暴露给前端:
前端-后端api-后端收到请求-后端获取三方资源-后端拿到三方资源-后端将资源返回给前端;
很明了也很实用,但是我没有用过,因为后端都很忙。
3、强大的说服力
我:我没办法,做不了。
项目经理:那就不做了。
更多推荐
所有评论(0)