webpack+vue-cil中proxyTable处理跨域的方法


Posted in Javascript onJuly 20, 2018

跨域

了解同源政策:所谓"同源"指的是"三个相同"。

  • 协议相同
  • 域名相同
  • 端口相同

解决跨域

1.jsonp 缺点:只能get请求 ,需要修改B网站的代码
2.cors 这个方案缺点 是 ie6 7 兼容不好(倒是不见得要兼容)。需要B网站在响应中加头
3.postMessage 缺点也是 ie6 7 兼容不好(倒是不见得要兼容)。需要修改B网站的代码
4.iframe window.name 传值得方式很巧妙,兼容性也很好。但是也是需要你能修改B网站代码
5.服务端主动请求B网站,兼容性好而且你客户端的代码还是原来的ajax,缺点是感觉不好。(服务器端是不存在跨域安全限制的)
6.类似5 用nginx把B网站的数据url反向代理。

node, express 解决跨域

加上请求头:

app.all('*', (req, res, next)=>{
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By",' 3.2.1')

  if(req.method=="OPTIONS") res.send(200);/*让options请求快速返回*/
  else next();
});

重点说一下vue-cli处理跨域

  • 前后端分离的项目,常常开发的时候,请求的接口地址存在跨域问题
  • webpack 前后端分离开发接口调试解决方案,proxyTable解决方案
  • 首先要在项目目录中找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用,自然而然是要配置在dev里面:
port: 8080,
proxyTable: {
 '/api': {
  target: 'http://www.ainyi.com', // 目标接口域名
  changeOrigin: true, // 是否跨域
  // secure: false, // 如果是https接口,需要配置这个参数
  pathRewrite: {
   '^/api': ''  // 重写接口,一般不更改
  }
 },
},

'/api' 为匹配项,target 为被请求的地址

以上代码表示:只要是http://www.ainyi.com/api的接口,都将被本地8080端口的请求代理:

http://localhost:8080/api ===> http://www.ainyi.com/api

也就是说,想请求接口http://www.ainyi.com/api,就是通过http://localhost:8080/api代理访问,就不会产生跨域。

这样就不需要在axios配置axios.defaults.baseURL,所有接口都由本地代理了

GitHub:https://github.com/Krryxa

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
Angular的$http与$location
Dec 26 Javascript
详解tween.js的使用教程
Sep 14 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
详解vue-cli官方脚手架配置
Jul 20 #Javascript
Vue中的异步组件函数实现代码
Jul 20 #Javascript
vue 中的keep-alive实例代码
Jul 20 #Javascript
Angularjs实现页面模板清除的方法
Jul 20 #Javascript
搭建vue开发环境
Jul 19 #Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 #jQuery
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 #Javascript
You might like
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
python实现AES和RSA加解密的方法
2019/03/28 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python 多进程队列数据处理详解
2019/12/23 Python
python__new__内置静态方法使用解析
2020/01/07 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
python3.4中清屏的处理方法
2020/07/06 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
无保留意见审计报告
2015/06/05 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
Python 正则模块详情
2021/11/02 Python