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 相关文章推荐
jQuery 遍历json数组的实现代码
Sep 22 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
JS中常用的正则表达式
Sep 29 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
vue实现的双向数据绑定操作示例
Dec 04 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 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
收音机术语解释
2021/03/01 无线电
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
javascript prototype 原型链
2009/03/12 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
python实现udp聊天窗口
2020/03/31 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
环保专项行动方案
2014/05/12 职场文书
敬老院标语
2014/06/27 职场文书
检讨书之工作不认真
2019/08/14 职场文书
python中super()函数的理解与基本使用
2021/08/30 Python
mysql函数全面总结
2021/11/11 MySQL
MySQL视图概念以及相关应用
2022/04/19 MySQL