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中显示隐藏的实现代码分析
Jul 26 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
实测jquery data()如何存值
Aug 18 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
JavaScript原型式继承实现方法
Nov 06 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与javascript的两种交互方式
2006/10/09 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
javascript 命名规则 变量命名规则
2010/02/25 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
JS中数组重排序方法
2016/11/11 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python实现跨文件全局变量的方法
2014/07/07 Python
Python多线程下载文件的方法
2015/07/10 Python
Python对文件操作知识汇总
2016/05/15 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
施工资料员的岗位职责
2013/12/22 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
幼师中班个人总结
2015/02/12 职场文书
部队个人年终总结
2015/03/02 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技