Servlet与vue-axios交互跨域问题之Access-Control-Allow-Origin' header contains multiple values '*, null', but only one is allowed.

问题简述:

  使用servlet与vue-axios进行前后端交互时,设置好了跨域,其后因考虑到用户验证问题,在前端请求时加入了请求头如下

axios.defaults.headers.common[‘token‘] = sessionStorage.getItem("token");

  其后,浏览器便报出了如下的错误

Access to XMLHttpRequest at ‘http://127.0.0.1:8081/test‘ from origin ‘null‘ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin‘ header contains multiple values ‘*, null‘, but only one is allowed.

  但是如果去掉添加的token则可以顺利通过,虽然报错的意思比较明显,但是依旧不明白怎么会有多个值呢?加上网上大多博主的意思也是设置了2次跨域,但是只有一个是允许的,可博主们用了比较厉害的Nginx代理,而我这初学者只用了servlet,顶天了加了一个过滤器(Filter)(曾一度窃喜怎么会有这么厉害的过滤器......),所以应该不存在博主们说的Nginx代理使得过滤器重复的问题。

解决办法:

  百思不得其解之下,突然想起好像servlet可以在web.xml中进行跨域设置,检查了项目下的web.xml,果然在进行过滤器配置的时候,无脑修改了web.xml,如下:

<!--映射过滤器 -->
	<filter-mapping>
		<filter-name>FilterControl</filter-name>
		<!--“/*”表示拦截所有的请求 -->
		<url-pattern>/*</url-pattern>
	</filter-mapping>
	<filter>
		<filter-name>CORS</filter-name>
		<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>CORS</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

  注释掉了下面代码:

<!-- <filter>
		<filter-name>CORS</filter-name>
		<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>CORS</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
 -->

  问题得以解决.......

设置了两次跨域允许,同时在前端传入了token。

Servlet与vue-axios交互跨域问题之Access-Control-Allow-Origin' header contains multiple values '*, null', but only one is allowed.

原文地址:https://www.cnblogs.com/waterbbro/p/12142060.html

时间: 2024-10-31 01:37:08

Servlet与vue-axios交互跨域问题之Access-Control-Allow-Origin' header contains multiple values '*, null', but only one is allowed.的相关文章

在vue中使用axios实现跨域请求并且设置返回的数据的格式是json格式,不是jsonp格式

在vue中使用axios实现跨域请求 需求分析:在项目中需要抓取qq音乐的歌曲列表的数据,由于要请求数据的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg.从qq音乐的官网上可以看到该请求的请求头中的referer中的域名是y.qq.com(发送请求页面的域名),而host的域名是c.y.qq.com(被请求页面的域名),由于两者不一样,所以不能通过前端直接发送请求给qq服务器去拿数据.这时候需要服务器做一个代理

浏览器禁止跨域访问及解决: No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource.

一.出现报错 二.原因: 1.跨域访问是浏览器做的一个保护机制(html5页面需要浏览器渲染) 2.如果页面所访问的后端没有部署在同一个浏览器也会报错 三.跨域问题的解决方式: A.通过后端访问后端的方式解决.     B.通过页面的漏洞来解决--jsonp(不常用) C.现在浏览器支持cors,当然需要我们后端代码也要支持跨域,springMVC是支持cors 写一个配置类:通过接口WebMvcConfigurer来放行跨区域访问 注意事项: 1.跨区域的路径必须是全路径(URL+端口号) 如

记录:使用springboot的cors和vue的axios进行跨域

一.编写一个配置类,并且注册CorsFilter: 注意允许跨域的域名不要写错 @Configuration public class ZysuyuanCorsConfiguration { @Bean public CorsFilter corsFilter() { // 初始化cors配置对象 CorsConfiguration corsConfiguration = new CorsConfiguration(); // 允许跨域的域名,如果要携带cookie,不能写*,*代表所有域名都可

【VUE】vue在vue-cli3环境下基于axios解决跨域问题

网上的绝大部分教程解决vue+axios跨域问题都不能直接适用vue-cli3.这是因为vue-cli3不一样的配置方式导致的. 如果是使用vue-cli3构建的项目,那么默认是没有config.js文件的.按照官方文档介绍,每个人可以通过在项目根目录下建立vue.config.js文件,配置属于自己的config文件. 之后按照网上其他的解决axios跨域问题的方案实施即可. // vue.config.js module.exports = { publicPath: '/', devSer

.net core3.1 webapi + vue.js + axios实现跨域

我所要讲述的是,基于.net core3.1环境下的webapi项目,如何去使用axios对接前端的vue项目 既然谈到axios,这里贴出axios的官方文档地址: http://www.axios-js.com/zh-cn/docs/ 首先是前端部分进行设置 第一步,在vue项目中安装axios 在vs code的终端中输入命令 npm install axios 稍等片刻,即可完成安装 第二步,构建axios的测试api 首先需要在main.js中,引入前面安装的axios 然后在某个组件

一篇搞定vue请求和跨域

vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基本Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护 axios发送AJAX请求 安装axios npm install axios -S 基本用法 axios([options]) axios.get(url[,options])  传参方式:1.通过url 传参   2.通过params选项传参 axios.p

Vue学习----webpack跨域问题proxyTable

跨域问题,搜索https://www.cnblogs.com/wancheng7/p/8987694.html,先学习一下, 在根目录config文件下的index.js中添加代码 '/api': { target: 'http://www.abc.com', //目标接口域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '/api' //重写接口 } }, 在App.vue下获取,将跨域的域名替换成/api/ created(){ th

Springboot vue.js html 跨域 前后分离 shiro权限 集成代码生成器

本代码为 Springboot vue.js  前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ mybaits+maven+接口 前端页面:html +vue.js 形式 jquery ajax 异步跨域 json 格式数据交互 前后分离,前后台分开部署 (特别注意,前端用的vue.js,  就是html页面引入vue.js形式, 用tomcat部署运行,更适合后台开发者) 1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)

axios处理跨域问题

首先npm安装好axios,其次在main.js中引入: import axios from 'axios' Vue.prototype.$axios = axios //把axios挂载到vue的原型中,在vue中每个组件都可以使用axios发送请求Vue.prototype.HOME = '/api' //重要在于这里,Vue.prototype.HOME = '/api'是一个定值,默认指向localhost,所有修改指向路径为'/api',配置文件index.js定义的可跨域路径 第二步