vue:webpack + vue-cil 中 proxyTable 处理跨域
跨域
了解同源政策:所谓"同源"指的是"三个相同"。
- 协议相同
- 域名相同
- 端口相同
解决跨域
- jsonp 缺点:只能get请求 ,需要修改B网站的代码
- cors 这个方案缺点 是 ie6 7 兼容不好(倒是不见得要兼容)。需要B网站在响应中加头
- postMessage 缺点也是 ie6 7 兼容不好(倒是不见得要兼容)。需要修改B网站的代码
- iframe window.name 传值得方式很巧妙,兼容性也很好。但是也是需要你能修改B网站代码
- 服务端主动请求B网站,兼容性好而且你客户端的代码还是原来的ajax,缺点是感觉不好。(服务器端是不存在跨域安全限制的)
- 类似5 用nginx把B网站的数据url反向代理。
node, express 解决跨域
- 加上请求头:
1 app.all('*', (req, res, next)=>{ 2 res.header("Access-Control-Allow-Origin", "*"); 3 res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With"); 4 res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); 5 res.header("X-Powered-By",' 3.2.1') 6 7 if(req.method=="OPTIONS") res.send(200);/*让options请求快速返回*/ 8 else next(); 9 });
重点说一下vue-cli处理跨域
- 前后端分离的项目,常常开发的时候,请求的接口地址存在跨域问题
- webpack 前后端分离开发接口调试解决方案,proxyTable解决方案
- 首先要在项目目录中找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用,自然而然是要配置在dev里面:
1 port: 8080,2 proxyTable: {3 '/api': {4 target: 'http://www.ainyi.com', // 目标接口域名5 changeOrigin: true, // 是否跨域6 // secure: false, // 如果是https接口,需要配置这个参数7 pathRewrite: {8 '^/api': '' // 重写接口,一般不更改9 } 10 }, 11 },
- '/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,所有接口都由本地代理了
转载于:https://www.cnblogs.com/zz-zrr/p/9335997.html
vue:webpack + vue-cil 中 proxyTable 处理跨域相关推荐
- vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
- vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
- 【全栈项目上线(vue+node+mongodb)】06.nodejs服务上线(生产环境前后分离的vue项目中怎么解决跨域问题)...
以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务 克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ...
- webpack之proxyTable设置跨域
webpack之proxyTable设置跨域 为什么要使用proxyTable 很简单,两个字,跨域. 在平时项目的开发环境中,经常会遇到跨域的问题,尤其是使用vue-cli这种脚手架工具开发时,由于 ...
- jQuery ajax 结合vue 获取豆瓣api 数据 ,jsonp解决跨域
jQuery ajax 结合vue 获取豆瓣api 数据 ,jsonp解决跨域 <!DOCTYPE html> <html><head><meta chars ...
- 关于vue-cli3中配置请求跨域的问题
关于vue-cli3中配置请求跨域的问题 根据Vue CLI3官方文档, 需要在vue.config.js文件中配置devServer.proxy选项来解决跨域问题. 1.关于vue.config.j ...
- 在Vue2中怎么解决跨域
Vue中怎么解决跨域问题 协议域名端口相同为同域 否则都为跨域 这就是需要用跨域来请求数据的报错 第一步:在vue项目中的跟目录下创建一个 vue.config.js ,文件名是固定的,不一样就会报错 ...
- vue-cli3中解决axios跨域问题(以360壁纸为例)
vue-cli3中解决axios跨域问题(以360壁纸为例) 一.先在vue项目文件夹里的根目录中新建 vue.config.js文件(与package.json同一级) 二.在 vue.config ...
- proxy跨域不生效_vue前后端端口号不同,proxytable代理跨域无效
前后端都部署在我的电脑上,只有端口号不同,前端用的vuecli,采用自带的proxytable设置跨域,但是ajax发送请求的时候,却没有变端口号,状态返回404 dev配置如下 dev: { // ...
最新文章
- linux shell mkpasswd 生成随机密码
- module 'matplotlib' has no attribute 'verbose'
- 如何获取程序返回值,退出码,错误码
- Locust接口性能测试
- UA MATH563 概率论的数学基础I 概率空间1 基本概念
- SA 分析专家认证名单出炉!这一期学员太牛了
- 距离算法在概率统计C语言,基于CBM-TOF探测器无触发数据获取系统的压缩算法-应用概率统计.PDF...
- python实现队列_Python学习教程:用队列实现栈
- sprintboot 后端将音频流写入到前端播放_freac for mac(音频和CD格式转换器)
- Java基础学习总结(100)——Dbunit入门简介
- 多线程的那点儿事(之死锁)
- 24.两两交换链表中的节点(力扣leetcode) 博主可答疑该问题
- 地图上分成一块一块区域 高德地图_高德地图行政区域划分问题有点搞不懂
- 大芒果单机修改服务器名字,大芒果服务器怎么创建GM账号?
- 使用J-Flash烧录固件
- 交通标志牌的检测与识别
- SQLite3数据库连接查询(c++篇)
- WebGL 及其在 WebRTC 中的应用
- 计算机原理与应用 第二章——ARM处理器
- VS编译器程序运行窗口一闪而过?教你一招!