后端servlet跨域问题

Question

很奇怪，前端axios不加自定义header，发送post一点问题都没有，一改自定义header，console就报跨域问题。

既然普通post都没有问题，说明配置应该是没有问题的。

后端servlet

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	
		response.setHeader("Access-Control-Allow-Origin", "*");
		response.setHeader("Access-Control-Allow-Headers", "Key"); 
		response.setHeader("Access-Control-Allow-Methods", "POST, GET,HEAD");
		response.setHeader("Access-Control-Max-Age", "3600");
		response.setContentType("text/json; charset=utf-8");
		request.setCharacterEncoding("utf-8");
	
		String headers = request.getHeader("Key");
		
		System.out.print(headers);
	}

      Axios({

        method: "post",

        url: "http://10.0.1.130:8080/u8/test",

        headers: {

          'Content-Type':'application/x-www-form-urlencoded',

          'Key':'abc'

        },

        data: qs.stringify({ main: "ss" })

      })

        .then(function(req) {

          console.log(req);

        })

Answer 1

我之前有把后端改成PHP接收，这样写的前端也是没有问题的。可以将问题锁定在是后端

Answer 2

查看一下接口响应的头信息，检查你加的head是否都写进去了。

Answer 3

Access-Control-Allow-Headers可以设置逗号分割的字符串,可能是因为你传递的header里有content-type和Key两个值，但是你设置的只有Key

另外你的报错信息应该完整的复制出来，应该对回答问题有很大帮助

response.setHeader("Access-Control-Allow-Headers", "Content-Type, Key");

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

Answer 4

看我博客里面关于一篇跨域问题的解决,不知道能否帮上