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 相关文章推荐
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
javascript代码加载优化方法
Jan 30 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
如何用threejs实现实时多边形折射
May 07 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/08/19 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
一分钟理解js闭包
2016/05/04 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
javascript实现简单留言板案例
2021/02/09 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
对python append 与浅拷贝的实例讲解
2018/05/04 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
QML使用Python的函数过程解析
2019/09/26 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
python 数据类型强制转换的总结
2021/01/25 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
毕业生的自我鉴定
2013/10/29 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
护士长竞聘书
2014/03/31 职场文书
开工典礼策划方案
2014/05/23 职场文书
社区反邪教工作方案
2014/06/16 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书