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 相关文章推荐
jQuery 表单验证扩展(三)
Oct 20 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
Ajax实现异步加载数据
Nov 17 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自动加载的两种实现方法
2010/06/21 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
python的keyword模块用法实例分析
2015/06/30 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
django使用xadmin的全局配置详解
2019/11/15 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
百丽国际旗下购物网站:优购
2017/02/28 全球购物
JAVA程序员面试题
2012/10/03 面试题
经贸日语专业个人求职信
2013/12/13 职场文书
承诺保证书格式
2015/02/28 职场文书
2015年环保局工作总结
2015/05/22 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
Python3接口性能测试实例代码
2021/06/20 Python
JavaScript实现简单拖拽效果
2021/09/15 Javascript
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电