webpack+vue-cil中proxyTable处理跨域的方法
更新时间：2018年07月20日 09:35:48 作者：筱月
这篇文章主要介绍了webpack+vue-cil中proxyTable处理跨域的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
跨域
了解同源政策：所谓"同源"指的是"三个相同"。
- 协议相同
- 域名相同
- 端口相同
解决跨域
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 DSL 流畅接口(使用链式调用)实例,本文讲解了DSL 流畅接口、DSL 表达式生成器等内容,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了微信小程序实现动态设置页面标题的方法,涉及微信小程序button组件事件绑定及页面元素属性动态设置相关实现技巧,并附带完整源码供读者下载参考,需要的朋友可以参考下2017-11-11
这篇文章主要给大家介绍了关于Webpack中loader打包各种文件的相关资料，其中包括处理css文件、less文件、scss文件、url地址以及ES6高级语法的方法，需要的朋友可以参考下2019-09-09
SPA的兴起，促使我们更加关注与内存相关的JavaScript编码实践。如果应用使用的内存越来越多，就会严重影响性能，甚至导致浏览器的崩溃。下面就来看看JavaScript中常见的内存泄漏以及如何避免内存泄漏2022-05-05
JavaScript中使用webuploader实现上传视频功能(demo)
这篇文章主要介绍了webuploader实现上传视频功能,通过本文给大家介绍了上传视频和上传图片的区别讲解，非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-04-04
这篇文章主要为大家介绍了js准确获取当前页面url网址信息的多种方法，包括正则法、split拆分法等，需要的朋友可以参考下2016-04-04
用惯了vue和react之后可能会慢慢淡忘掉原生的一些操作dom的几种方式,有的时候确实需要我们通过原生的方式进行操作,下面这篇文章主要给大家介绍了关于js修改元素样式的九种方式,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了js生成随机数的过程，如何生成[n,m]的随机整数，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了如何利用HTML+CSS+JS制作抓娃娃机游戏，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这次是更改后的代码实现以下功能：去掉了“确定”，“取消”按钮。变单击为双击事件，用户按ESC键，取消更改感兴趣的朋友可以了解下2013-01-01
最新评论