vue中axios访问Java后端跨域问题解决
问题背景:
前后端分离,前端选用Vue,后端选用Java,vue编译出的静态页面采用ngix发布,在前端访问后端时出现跨域问题。
解决方法:
跨域的问题解决方法有好多种,这里是通过服务端解决,以下是代码实现。
public class AllowOriginFilter implements Filter {
@SuppressWarnings("unused")
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest request=(HttpServletRequest)req;
response.setHeader("Access-Control-Allow-Origin", "*"); // 设置允许所有跨域访问
response.setHeader("Access-Control-Allow-Methods", "POST,GET,PUT,OPTIONS,DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin,X-Requested-With,Content-Type,Accept,Authorization,token");
response.setHeader("Access-Control-Allow-Credentials", "true");
chain.doFilter(req,res);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}
导致跨域问题的情况:
| URL地址 | 解释说明 | 是否允许通信 |
|
http://www.a.com/a.js http://www.a.com/b.js |
同一域名 | 允许 |
|
http://www.a.com/a/a.js http://www.a.com/b/b.js |
同一域名,不同文件夹 | 允许 |
|
http://www.a.com/a.js http://www.a.com:8080/b.js |
同一域名,不同端口 | 不允许 |
|
http://www.a.com/a.js https://www.a.com/b.js |
同一域名,不同协议; 一个是http,另一个是https |
不允许 |
|
http://www.a.com/a.js https://www.10.0.1.100.com/b.js |
一个域名,一个域名对应的IP | 不允许 |
|
http://www.a.com/a.js https://www.sub.a.com/b.js |
同一主域名,二级域名不同 | 不允许 |
|
http://www.a.com/a.js http://www.b.com/b.js |
两个不同的域名 | 不允许 |
vue中axios访问Java后端跨域问题解决的更多相关文章
- vue 解决axios请求出现前端跨域问题
vue 解决axios请求出现前端跨域问题 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中 ...
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- Vue中axios访问 后端跨域问题
public class AllowOriginFilter implements Filter { @SuppressWarnings("unused") public void ...
- vue使用axios调用豆瓣API跨域问题
最近做了一个vue小demo,使用了豆瓣开源的API,通过ajax请求时需要跨域才能使用. 封面.jpg 一.以下是豆瓣常用的开源接口: 正在热映 :https://api.douban.com/ ...
- 01.在vue中通过 JSONP 方式来跨域
//1.引入 : 在main.js 中引入该文件即可 //2.使用: axios.jsonp('地址').then(res => { // console.log(res) // } impor ...
- 转换:使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题
本人配置成功https://segmentfault.com/a/1190000011072725
- 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)
前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...
- axios 封装 跨域 实现 (后端跨域配置白名单)
1. 始vue化项目 vue init webpack deaxios # 使用脚手架创建项目 deaxios(项目名,随便取得) cd deaxios # 进入项目cnpm install npm ...
- 使用nginx反向代理处理前后端跨域访问
本文主要解决:使用nginx反向代理处理前后端跨域访问的问题 1.何为跨域访问? 以下类型为跨域访问 1)不同域名间访问 www.zuiyoujie.com和www.baidu.com 2)同域名不同 ...
随机推荐
- Cookis与文件缓存的区别
我是一位顶尖的网络专家.稍后更新...
- shiro 实现 用户 a 操作b 的权限 ,用户 b 能够及时获知。b不需要退出登陆 。 关闭鉴权缓存,或者不配置缓存
<bean id="myRealm" class="com.diancai.util.MyRealm"> <property name=&qu ...
- springmvc 测试项目示例
新建一个 maven项目 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=" ...
- Silverlight或WPF动态绑定图片路径问题,不用Converter完美解决
关于Silverlight或WPF动态绑定图片路径问题,不用Converter完美解决, 可想,一个固定的字符串MS都能找到,按常理动态绑定也应该没问题的,只需在前面标记它是一个Path类型的值它就能 ...
- 负值之美:负margin在页面布局中的应用
本文转载自:http://www.topcss.org/?p=94,有修改. 负数给人总是一种消极.否定.拒绝之感,不过有时利用负margin可以达到奇妙的效果,今天就表一表负值在页面布局中的应用.这 ...
- 2018.10.19 NOIP模拟 硬币(矩阵快速幂优化dp)
传送门 不得不说神仙出题人DZYODZYODZYO出的题是真的妙. f[i][j][k]f[i][j][k]f[i][j][k]表示选的硬币最大面值为iii最小面值不小于jjj,总面值为kkk时的选法 ...
- 2018.10.17 NOIP模拟 发电机(概率dp)
传送门 考试空间开大了爆零不然只有30分爆栈? 话说这题真的坑1e7没法写dfsdfsdfs 其实很好推式子. 考虑每个点安一个发动机的概率,推一波式子做个等比数列求和什么的可以证明出来是严格的1si ...
- 2018.07.03 BZOJ 1007: [HNOI2008]水平可见直线(简单计算几何)
1007: [HNOI2008]水平可见直线 Time Limit: 1 Sec Memory Limit: 162 MB Description 在xoy直角坐标平面上有n条直线L1,L2,-Ln, ...
- 2018.07.03 POJ 2653 Pick-up sticks(简单计算几何)
Pick-up sticks Time Limit: 3000MS Memory Limit: 65536K Description Stan has n sticks of various leng ...
- sql join用法(转)
left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只 ...