proxy跨域不生效_vue-cli3.0使用proxytable解决跨域问题
现代的web开发一般都是前后端分离,前后端使用rest api进行交互,分离使得前后端服务器一般都不在一起,这导致了跨域问题,本文说明在vue-cli中解决这一问题
跨域问题简述
如果浏览器有类似下面的报错信息,则说明碰到跨域问题了
localhost/:1 Failed to load http://www.abc.cn/test/testToken.php: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
在没有设置Access-Control-Allow-Origin这个标签的情况下,浏览器默认是不允许跨域发送请求的,这里面涉及到安全问题,XSS、CSRF等攻击手段都是恶意脚本的跨站访问,所以一般在服务端没有特殊说明的情况下,浏览器都是禁用CORS的。
浏览器如何判断是否是跨域访问呢?这里面就要讲到同源策略。同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则基于互联网的web访问安全会受到巨大威胁。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
简单的来说:协议、IP、端口三者都相同,则为同源。不是同源的脚本不能操作其他源下面的对象。
cors.png
解决方案
同源策略保障了互联网的安全访问,但是却对于前后端分离的应用带来了挑战。幸运的是,现在的解决方案也很多,比如script标签、jsonp、后端设置cors等等。之前我是用的方式即是服务端设置cors,返回标头内携带access-control-allow-origin: *标签,可解决跨域问题。配置如下(使用spring boot开发的后端服务)
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1
corsConfiguration.addAllowedHeader("*"); // 2
corsConfiguration.addAllowedMethod("*"); // 3
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 4
return new CorsFilter(source);
}
}
但这种方式一方面使得后端服务产生安全问题,另外如果碰到需要使用cookie的场景(比如会话保持),仍然还是失效的(cookie严格限制无法进行跨域访问)。所以比较推荐的做法还是在前端设置proxy代理,来解决跨域问题。这边使用的是vue-cli3.0,配置和之前略有不同,在根目录的vue.config.js下加入如下配置:
devServer: {
proxy: {
'/api': {
target: 'http://127.0.0.1:33000/api',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}
如此在前端所有发往/api的请求都会转发至后端服务http://127.0.0.1:33000/api,问题解决。注意这边配置的是开发环境,供调试使用,生产环境可使用nginx或haproxy的代理功能进行转发.
proxy跨域不生效_vue-cli3.0使用proxytable解决跨域问题相关推荐
- proxyTable解决跨域
什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源. 跨域报错截图: 配置proxyTable解决跨域 1.proxyTable在根目录下config文件夹下的index.js文件的 ...
- proxy跨域不生效_vue前后端端口号不同,proxytable代理跨域无效
前后端都部署在我的电脑上,只有端口号不同,前端用的vuecli,采用自带的proxytable设置跨域,但是ajax发送请求的时候,却没有变端口号,状态返回404 dev配置如下 dev: { // ...
- js webpack 解决跨域问题_详解webpack-dev-server使用http-proxy解决跨域问题
文档资料 Vue-cli proxyTable 解决开发环境的跨域问题--虽然这篇是写vue的,不过用在webpack-dev-server上也是一样的 http-proxy-middleware-- ...
- nginx解决浏览器跨域问题_前端通过Nginx反向代理解决跨域问题
在前面写的一篇文章SpringMVC解决跨域问题,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式 ...
- android ajax 跨域更新本地html,本地webapp是怎么解决跨域问题的?
像ionic的cli,都可以把一个ionic的webapp打包成本地的,那这样的话是如何解决跨域问题的? 在PC上,我直接访问连接获取数据,代码如下.(抄自W3School) function loa ...
- ProxyTable 解决跨域
使用vue-cli脚手架工具开发时,我们在本地启动服务,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://xxxx.com/all/ ...
- proxy connect abort处理方法_Vue 3.0 初探 - Proxy
前言 4 月 17 日,尤大在微博上宣布 Vue 3.0 beta 版本正式发布. 在尤大发布的< Vue3 设计过程>文章中提到之所以重构 Vue 一个考量就是JavaScript新的语 ...
- ssm 跨库查询_SSM使用AbstractRoutingDataSource后究竟如何解决跨库事务
Setting: 绑定三个数据源(XA规范),将三个实例绑定到AbStractoutingDataSource的实例MultiDataSource(自定义的)对象中,mybatis SqlSessi ...
- 通过nginx反向代理解决跨域
先写一个发送跨域请求的页面index.html <html> <head><title></title> </head> <body& ...
最新文章
- 入职培训笔记记录--day2续(1、运算符 2、数据的输入与输出 3、控制语句)
- Android教你打造独一无二的刷新加载框架
- arpr选定的文件非rar压缩包_python解压压缩包
- 58到家技术总监沈剑:有选择的借鉴才能不走弯路
- 7.13 T2 Shit 题(shit)
- 语言 重量计算_大师之光:有种跨越国界的语言叫C++
- mysql db compare_数据传输 | mysqldiff/mysqldbcompare 实现 DTLE 自动化测试
- 执行删除操作返回没被删除的信息
- Linux多线程实践(六)使用Posix条件变量解决生产者消费者问题
- Maximum Subsequence Sum最大子列和问题(c语言实现)
- 使用hexo创建blog
- 【转载】这次拆库 应是微服务化的拆分方式
- 【译】《Pro ASP.NET MVC4 4th Edition》第三章(二)
- vb.ne textbox数字保存excel_Excel 另类保护:锁死页面布局、保存、审阅标签右键等菜单禁编辑...
- HCIE-Security Day26:IPSec:实验(一)两个网关之间通过IKE方式协商IPSec PN隧道(采用预共享密钥认证)
- 微积分知识总览(1)——微积分准备知识
- 百度离线地图示例之一:地图展示
- C#操作Word书签
- 推销员基础解法c++
- 三菱fx5u plc项目模板程序(含触摸屏程序) 程序注释全面,用的三菱fx5u系列plc和威纶触摸屏
热门文章
- (PCB系列三)AD六层板布线经验累积
- LeetCode Top100 Liked 题单(序号1~17)
- 58 Three.js 通过THREE.Raycaster给模型绑定点击事件
- 深度学习学习笔记——如何调参
- 5G资费其实已经大幅下降,消费者不愿用5G在于信号太差了
- 五年级上册分数计算机,五年级上册分数知识整理
- Linux命令之修改文件所属组chgrp
- c语言如何输出整形数组,C语言 有一个整形数组a,有10个元素,要求输出数组中的全部元素...
- 小记pandas中DataFrame.dropna方法
- 继承、接口、抽象类综合题