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 相关文章推荐
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 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
解决中英文字符串长度问题函数
2007/01/16 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
基于jQuery的js分页代码
2010/06/10 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
Javascript通过控制类名更改样式
2019/05/24 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
Python复制文件操作实例详解
2015/11/10 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
python安装requests库的实例代码
2019/06/25 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
python面向对象 反射原理解析
2019/08/12 Python
什么是Python变量作用域
2020/06/03 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
学前教育学生自荐信范文
2013/12/31 职场文书
爱耳日活动总结
2014/04/30 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
南京导游词
2015/02/03 职场文书
毕业生个人自荐书
2015/03/05 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis