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创建对象的方式总结
Jan 10 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
Vue2.0用户权限控制解决方案
Nov 29 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
js实现时间日期校验
May 26 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
PHP的PDO连接讲解
2019/01/24 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
js 动态选中下拉框
2009/11/26 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
使用Python横向合并excel文件的实例
2018/12/11 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
Python流程控制语句的深入讲解
2020/06/15 Python
浅谈Python 参数与变量
2020/06/20 Python
利用python实现汉诺塔游戏
2021/03/01 Python
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
Java基础类库面试题
2013/09/04 面试题
园林设计师自荐信
2013/11/18 职场文书
采购员的工作职责
2013/12/26 职场文书
生日宴会答谢词
2014/01/09 职场文书
课程改革实施方案
2014/03/16 职场文书
食品质检员岗位职责
2015/04/08 职场文书
学校捐书倡议书
2015/04/27 职场文书
安全教育培训心得体会
2016/01/15 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server