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基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
深入理解node.js之path模块
May 03 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
JS实现滑动插件
Jan 15 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
使用jQuery实现购物车
Oct 29 jQuery
详解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页面缓存ob系列函数介绍
2012/10/18 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
PHP扩展开发入门教程
2015/02/26 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
实习教师个人的自我评价
2013/11/08 职场文书
小学数学国培感言
2014/03/10 职场文书
大型营销活动计划书
2014/04/28 职场文书
2014年审计工作总结
2014/11/17 职场文书
求职简历自我评价2015
2015/03/10 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
公司聚餐通知
2015/04/22 职场文书
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记