问题背景:

  前后端分离,前端选用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后端跨域问题解决的更多相关文章

  1. vue 解决axios请求出现前端跨域问题

    vue 解决axios请求出现前端跨域问题 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中 ...

  2. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  3. Vue中axios访问 后端跨域问题

    public class AllowOriginFilter implements Filter { @SuppressWarnings("unused") public void ...

  4. vue使用axios调用豆瓣API跨域问题

    最近做了一个vue小demo,使用了豆瓣开源的API,通过ajax请求时需要跨域才能使用.   封面.jpg 一.以下是豆瓣常用的开源接口: 正在热映 :https://api.douban.com/ ...

  5. 01.在vue中通过 JSONP 方式来跨域

    //1.引入 : 在main.js 中引入该文件即可 //2.使用: axios.jsonp('地址').then(res => { // console.log(res) // } impor ...

  6. 转换:使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题

    本人配置成功https://segmentfault.com/a/1190000011072725

  7. 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)

    前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...

  8. axios 封装 跨域 实现 (后端跨域配置白名单)

    1. 始vue化项目 vue init webpack deaxios # 使用脚手架创建项目 deaxios(项目名,随便取得) cd deaxios # 进入项目cnpm install npm ...

  9. 使用nginx反向代理处理前后端跨域访问

    本文主要解决:使用nginx反向代理处理前后端跨域访问的问题 1.何为跨域访问? 以下类型为跨域访问 1)不同域名间访问 www.zuiyoujie.com和www.baidu.com 2)同域名不同 ...

随机推荐

  1. Spark实践 -- 性能优化基础

    性能调优相关的原理讲解.经验总结: 掌握一整套Spark企业级性能调优解决方案:而不只是简单的一些性能调优技巧. 针对写好的spark作业,实施一整套数据倾斜解决方案:实际经验中积累的数据倾斜现象的表 ...

  2. 2018.09.15[POI2008]BLO-Blockade(割点)

    描述 There are exactly nn towns in Byteotia. Some towns are connected by bidirectional roads. There ar ...

  3. hdu-1163(九余数定理)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1163 思路: 九余数定理:一个数对九取余的结果叫做九余数, 一个数的各个位数相加的得到的小于10的数也 ...

  4. HDU 1718 Rank (排序)

    题意:给你n个学号和成绩,并且给定一个学号,让找这个学号是多少名. 析:用个结构体,按成绩排序,然后找那个学号,这个题有一个小坑,那就是并列的情况, 可能并列多少名,这个要考虑一下,其他的easy! ...

  5. LA 3942 && UVa 1401 Remember the Word (Trie + DP)

    题意:给你一个由s个不同单词组成的字典和一个长字符串L,让你把这个长字符串分解成若干个单词连接(单词是可以重复使用的),求有多少种.(算法入门训练指南-P209) 析:我个去,一看这不是一个DP吗?刚 ...

  6. 如何设置vim中tab键缩进---配置初始化设置

    转载自:http://blog.51cto.com/xuding/1725376:加了一些补充说明 问题: Linux系统下,Tab键默认为8个字符,需呀将其修改为4个字符的方式使用 步骤: 1.在用 ...

  7. 批处理(bat)的注释方法

    前面两个批处理教程的转贴,写得实在是太好了,内容详实,语言风趣,举例清晰.说实话,原作者幽默的文风用来写 批处理教程,而不是写文学小说,实在是有些屈才,但这样优秀的教程,用在枯燥乏味的程序事业里,确实 ...

  8. sqlite3数据库,增删改查

    搜索libsql //由于文件读写,归档,NSUserDefault,做持久存储的时候,是一个覆盖的过程,效率太低,更多的时候使用数据库来做持久化存储         //鉴于手机的硬件配置,使用轻量 ...

  9. NC入门笔记

    简介: NC(全名NetCat),在网络界有"瑞士军刀"的美誉.它小巧而强悍,被设计成一个稳定的后门工具,能够直接由其它程序和脚本轻松驱动.同时,它也是一个功能强大的网络调试和探测 ...

  10. SQL Server 2016最值得关注的10大新特性

    全程加密技术(Always Encrypted) 全程加密技术(Always Encrypted)支持在SQL Server中保持数据加密,只有调用SQL Server的应用才能访问加密数据.该功能支 ...