跨域 webpack + vue-cil 中 proxyTable 处理跨域
博客地址:https://ainyi.com/27
跨域
了解同源政策:所谓"同源"指的是"三个相同"。
- 协议相同
- 域名相同
- 端口相同
解决跨域
- 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 elsenext();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://ainyi.com/27
转载于:https://www.cnblogs.com/ainyi/p/9335952.html
跨域 webpack + vue-cil 中 proxyTable 处理跨域相关推荐
- vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
- php 设置跨域axios,vue2.0中proxyTable用axios进行跨域请求的设置方法
vue2.0设置proxyTable使用axios进行跨域请求的方法 这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装ax ...
- 解决vue项目中的前端跨域问题
什么是跨域 正常情况下,我们使用ajax请求的数据都在自己的服务器上.但在一些特定的场景中,我们需要获取到别人的服务器上的数据,也就是在自己的服务器中的ajax要请求到别人的服务器的网址,这就是跨域. ...
- 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 ...
- java解决跨域问题_Java项目中如何解决跨域问题
Java项目中如何解决跨域问题 发布时间:2020-11-11 16:00:40 来源:亿速云 阅读:91 作者:Leah Java项目中如何解决跨域问题?很多新手对此不是很清楚,为了帮助大家解决这个 ...
- vue项目中已拦截跨源请求:同源策略禁止读取位于....(原因:CORS 请求未能成功)解决方案
手动给Global.asax配置,添加如下方法 protected void Application_BeginRequest(object sender, EventArgs e){System.W ...
- 远程桌面 域计算机,在AD中实现仅普通域用户可通过远程桌面控制自身计算机
一用户可以使用远程桌面连接计算机的要求 1.1使用户可以使用远程桌面的四个要求 要想让域用户可以通过远程桌面的功能远程连接计算机,必须满足几个条件: 1.客户端计算机必须开启"允许远程桌面& ...
- java获取表单隐藏域的值,Servlet中使用表单隐藏域
Servlet中使用表单隐藏域 表单隐藏域也是一种会话跟踪技术. 如果使用了"表单隐藏域",将使用一个隐藏(不可见)文本域来维护用户的状态. 在这种情况下,我们将信息存储在表单的隐 ...
- vue:webpack + vue-cil 中 proxyTable 处理跨域
跨域 了解同源政策:所谓"同源"指的是"三个相同". 协议相同 域名相同 端口相同 解决跨域 jsonp 缺点:只能get请求 ,需要修改B网站的代码 cors ...
最新文章
- Linux cpuidle framework
- 醒醒吧!送给那些盲目自学的人
- python爬去朋友圈_python爬虫24 | 搞事情了,用 Appium 爬取你的微信朋友圈。
- 百度实习笔试题(2012.5.6)
- windows server 2008安装wampserver后几种小问题个人总结
- Linq系列(5)——表达式树之案例应用
- TabLayout的自定义
- 微信小游戏代码包侵权(最新)
- 飞客蠕虫(Conficker)
- java %2c_java2c工具(修复)
- C++面试题(数据结构)
- pythongui入门实例大全详细教程全_python简单进阶之GUI:PySimpleGUI案例
- padavan固件获取网络地图中的客户端状态
- 智能水杯设计方案_智能水杯-设计报告终稿.doc
- Google网站流量统计工具
- vue 使用高德地图 api
- 如何将matlab设置为默认打开方式,如何设置默认打开方式
- aspen压缩因子_ASPEN PLUS的物性数据库及其应用.pdf
- http请求头中Referer的含义和作用
- 面试:第十二章:所有总结
热门文章
- selenium-webdriver层级定位元素
- WinAPI: Rectangle - 绘制矩形
- 如何在Windows XP下安装Windows2000
- 使用“npm init”初始化项目
- 洛谷P2023 [AHOI2009]维护序列
- datalist 给输入框绑定文本提示(大部分浏览器不支持)
- WPF Invoke与BeginInvoke的区别
- fir.im Weekly - 技术人也要苦练“七十二变”
- 配置WindowsLiveWriter,写cnblogs博客
- POJ 1365 Prime Land