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


Posted in Javascript onMay 26, 2019

前言

在使用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
};

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

结语

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

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

Javascript 相关文章推荐
js 操作符实例代码
Oct 24 Javascript
JavaScript高级程序设计 扩展--关于动态原型
Nov 09 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 #Javascript
vue实现的请求服务器端API接口示例
May 25 #Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 #Javascript
泛谈JS逻辑判断选择器 || &&
May 24 #Javascript
了解JavaScript中的选择器
May 24 #Javascript
Javascript通过控制类名更改样式
May 24 #Javascript
redux.js详解及基本使用
May 24 #Javascript
You might like
php include的妙用,实现路径加密
2008/07/29 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
PHP反射基础知识回顾
2020/09/10 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
Python计算程序运行时间的方法
2014/12/13 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
wxPython实现绘图小例子
2019/11/19 Python
Python unittest框架操作实例解析
2020/04/13 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
大学生社团活动总结
2014/04/26 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
财务会计岗位职责
2015/02/03 职场文书
西柏坡导游词
2015/02/05 职场文书
英语辞职信怎么写
2015/02/28 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
使用CSS连接数据库的方式
2022/02/28 HTML / CSS
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android