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 设计模式 富有表现力的Javascript(一)
May 26 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
PHP求最大子序列和的算法实现
2011/06/24 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
C语言开发工程师测试题
2016/12/20 面试题
小学教师的个人自我鉴定
2013/10/24 职场文书
实习心得体会
2014/01/02 职场文书
新年主持词
2014/03/27 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
子女赡养老人协议书
2016/03/23 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
Python+Tkinter打造签名设计工具
2022/04/01 Python