资讯专栏INFORMATION COLUMN

vue项目打包后怎样优雅的解决跨域

nanchen2251 / 2734人阅读

摘要:结语因为公司的前后端项目通常都放在同一台服务器,或者不在同一台服务器的时候跨域也是靠后端的同志们去解决的,所以很少在生产环境中靠前端解决跨域的这项需求。

前言

在使用vue.js开发前端项目时,再结合webpack搞起各种依赖、各种插件进行开发,无疑给前端开发带来了很多便捷,就在解决跨域这个问题上,相信众多用vue.js的前端同僚们同我一样尝到了甜头,开发环境全靠proxyTable一通配置简直不要太酸爽。还不明所以然的新手们可能还没搞清我说的是什么,就是下面这几行配置:

</>复制代码

  1. proxyTable: {
  2. "/api": {
  3. target: "http://113.113.113.113:5000", //假的接口地址哈
  4. changeOrigin: true,
  5. pathRewrite: {
  6. "^/api": ""
  7. }
  8. },

我们的跨域竟然就这样完美的解决了,然后就开始愉快的请求后端的接口啦!!

回到正题

具体场景:公司的一个h5项目是部署在客户端的,但是部署后出现bug了,由于多人协同开发且赶进度竟然是打包后因为CSS的问题多个页面布局乱了,但是开发环境并没有问题啊,怎么打完包样式就乱了?那就打开dist下的index.html看看呗,复现一下bug,想都不用想,页面没数据怎么复现,再去造一套假数据?作为一个不喜欢这样折腾的人必然是不想做这种事情的。

就不劳烦后端了,咱自己解决!

nginx还是要会一些些的,自己配置一下,分分钟解决,哈哈!

</>复制代码

  1. server {
  2. listen 8082;
  3. server_name 127.0.0.1; //咱自己nginx服务器地址
  4. #charset koi8-r;
  5. #access_log logs/host.access.log main;
  6. location / {
  7. root html;
  8. index index.html index.htm;
  9. }
  10. location /app-api {
  11. rewrite ^.+app-api/?(.*)$ /$1 break;
  12. include uwsgi_params;
  13. proxy_pass http://113.113.113.113:5001/; //后端接口地址
  14. //关键部分start
  15. add_header Access-Control-Allow-Origin *;
  16. add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
  17. add_header Access-Control-Allow-Headers "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token";
  18. //关键部分end
  19. //以下配置参见nginx配置文档哈
  20. #Proxy Settings
  21. proxy_redirect off;
  22. proxy_set_header Host $host;
  23. proxy_set_header X-Real-IP $remote_addr;
  24. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  25. proxy_set_header Connection close;
  26. proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
  27. proxy_max_temp_file_size 0;
  28. proxy_connect_timeout 90;
  29. proxy_send_timeout 90;
  30. proxy_read_timeout 90;
  31. proxy_buffer_size 4k;
  32. proxy_buffers 4 32k;
  33. proxy_busy_buffers_size 64k;
  34. proxy_temp_file_write_size 64k;
  35. }
  36. }

目的是把后端接口用nginx再代理一遍,咱自己用nginx间接允许一下跨域请求!

</>复制代码

  1. start nginx //在nginx目录启动服务

通常我们会做一个统一的管理接口的js文件,如下形式

</>复制代码

  1. var BASE_URL = "/api";
  2. var isPro = process.env.NODE_ENV === "production"
  3. if(isPro){
  4. BASE_URL= "http://113.113.113.113:5000", //线上或者测试地址
  5. //BASE_URL= "http://127.0.0.1:8020", //nginx代理地址
  6. //当我们需要打包后依然能正常调接口的时候用这个
  7. }
  8. const UrlConfig = {
  9. getToken:BASE_URL + "某接口"
  10. }
  11. export default {
  12. UrlConfig
  13. };

至此,就把打包后接口跨域的问题优雅的解决啦。

结语

因为公司的前后端项目通常都放在同一台服务器,或者不在同一台服务器的时候跨域也是靠后端的同志们去解决的,所以很少在生产环境中靠前端解决跨域的这项需求。不过我分享的这个小技巧也只适用于以上类似场景中,归根结底还是要在多人协同开发的过程中提前规划好公共以及个人的编程规范,尽量保证开发环境和生产环境是一致的,就可以摆脱很多类似的问题。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/40432.html

相关文章

  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0
  • vue项目搭建以及全家桶使用详细教程

    摘要:前言是现阶段很流行的前端框架,很多人通过官方文档的学习,对的使用都有了一定的了解,但再在项目工程化处理的时候,却发现不知道改怎么更好的管理自己的项目,如何去引入一些框架以及全家桶其他框架的使用,以下将详细地介绍本人在处理工程文件构建的过程对 前言 vue是现阶段很流行的前端框架,很多人通过vue官方文档的学习,对vue的使用都有了一定的了解,但再在项目工程化处理的时候,却发现不知道改怎...

    simon_chen 评论0 收藏0
  • vue项目搭建以及全家桶使用详细教程

    摘要:前言是现阶段很流行的前端框架,很多人通过官方文档的学习,对的使用都有了一定的了解,但再在项目工程化处理的时候,却发现不知道改怎么更好的管理自己的项目,如何去引入一些框架以及全家桶其他框架的使用,以下将详细地介绍本人在处理工程文件构建的过程对 前言 vue是现阶段很流行的前端框架,很多人通过vue官方文档的学习,对vue的使用都有了一定的了解,但再在项目工程化处理的时候,却发现不知道改怎...

    curlyCheng 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<