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

 更新时间:2019年05月26日 08:16:47   作者:不一  
这篇文章主要介绍了vue项目打包后怎样优雅的解决跨域,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

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

proxyTable: {
   '/api': {
    target: 'http://113.113.113.113:5000', //假的接口地址哈
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''
    }
   },

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

回到正题

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

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

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

server {
    listen    8082;
    server_name 127.0.0.1; //咱自己nginx服务器地址

    #charset koi8-r;

    #access_log logs/host.access.log main;

    location / {
      root  html;
      index index.html index.htm;
    }
  location /app-api {
      rewrite ^.+app-api/?(.*)$ /$1 break;
      include uwsgi_params;
      proxy_pass  http://113.113.113.113:5001/; //后端接口地址
      //关键部分start
      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
      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';
      //关键部分end
      //以下配置参见nginx配置文档哈
      #Proxy Settings
      proxy_redirect   off;
      proxy_set_header  Host       $host;
      proxy_set_header  X-Real-IP    $remote_addr;
      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header  Connection    close;
      proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
      proxy_max_temp_file_size 0;
      proxy_connect_timeout   90;
      proxy_send_timeout     90;
      proxy_read_timeout     90;
      proxy_buffer_size     4k;
      proxy_buffers       4 32k;
      proxy_busy_buffers_size  64k;
      proxy_temp_file_write_size 64k;
    }
}

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

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

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

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

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

结语

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 结合康熙选秀讲解vue虚拟列表实现

    结合康熙选秀讲解vue虚拟列表实现

    这篇文章主要为大家介绍了结合康熙选秀讲解vue虚拟列表的原理使用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue中EpicEditor和vue-quill-editor的使用详解

    Vue中EpicEditor和vue-quill-editor的使用详解

    EpicEditor和Vue-quill-editor都是基于Quill.js的富文本编辑器,并且都提供了许多强大的功能,下面我们就来介绍一下二者的具体使用,感兴趣的小伙伴可以了解一下
    2023-11-11
  • Vue路由与a标签链接锚点发生冲突问题及解决

    Vue路由与a标签链接锚点发生冲突问题及解决

    这篇文章主要介绍了Vue路由与a标签链接锚点发生冲突问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue数组更新及过滤排序功能

    Vue数组更新及过滤排序功能

    Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本。本文将详细介绍Vue数组更新及过滤排序
    2017-08-08
  • Vue实现文件切片上传功能的示例代码

    Vue实现文件切片上传功能的示例代码

    在实际开发项目过程中有时候需要上传比较大的文件,然后呢,上传的时候相对来说就会慢一些,so,后台可能会要求前端进行文件切片上传。本文介绍了Vue实现文件切片上传的示例代码,需要的可以参考一下
    2022-10-10
  • Vue中的变量赋值问题

    Vue中的变量赋值问题

    这篇文章主要介绍了Vue中的变量赋值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 超简单易懂的vue组件传值

    超简单易懂的vue组件传值

    这篇文章主要为大家详细介绍了vue组件传值,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • 使用mint-ui开发项目的一些心得(分享)

    使用mint-ui开发项目的一些心得(分享)

    下面小编就为大家带来一篇使用mint-ui开发项目的一些心得(分享)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue中install方法介绍

    vue中install方法介绍

    这篇文章主要给大家分享了 vue中install方法介绍,vue提供install可供我们开发新的插件及全局注册组件等,感兴趣的小伙伴请和小编一起进入文章了解具体内容吧

    2021-11-11
  • 如何在vue中更优雅的封装第三方组件详解

    如何在vue中更优雅的封装第三方组件详解

    在封装第三方组件中,经常会遇到一个问题,下面这篇文章主要给大家介绍了关于如何在vue中更优雅的封装第三方组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05

最新评论