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 相关文章推荐
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
vue脚手架项目创建步骤详解
Mar 02 Vue.js
详解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
php在线打包程序源码
2008/07/27 PHP
php 异常处理实现代码
2009/03/10 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
10条php编程小技巧
2015/07/07 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
html5时钟实现代码
2010/10/22 HTML / CSS
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
体育专业学生自我评价范文
2014/01/17 职场文书
教师个人自我评价范文
2014/04/13 职场文书
四则混合运算教学反思
2016/02/23 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript