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网页制作特殊效果用随机数
May 22 Javascript
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
jquery插件jbox使用iframe关闭问题
Feb 09 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
vue实现抖音时间转盘
Sep 08 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
php继承的一个应用
2011/09/06 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
python读取Excel实例详解
2018/08/17 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
小学教师岗位职责
2013/11/25 职场文书
春节请假条
2014/04/11 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
医德医风自我评价
2014/09/19 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
焦点访谈观后感
2015/06/11 职场文书
手残删除python之后的补救方法
2021/06/26 Python