跨域报错：Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origi

在编写一个简单POST跨域请求时碰到了这个问题，我看了下网上的答案，感觉我好像也都做到了，但是就是不行，我将核心问题进行了抽象，抽象为下面的代码：

前端是这样的：

$.ajax({
			type: "post", 
			url: "http://localhost:8081/test/testUploadPhoto",
			dataType: "json", 
			data:{
				canvasPhotoBase64Data:"dataUrl",
			},
			beforeSend: function(xhr) {
			    xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
			},
			success: function (data) {
				console.log("已接收")
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				console.log("errorThrown:"+errorThrown);
			}
		});

后端是这样的：

@RequestMapping("/test")
@RestController
public class TestUpload {
    @RequestMapping("/testUploadPhoto")
    public String testUploadPhoto(String canvasPhotoBase64Data, HttpServletResponse response){
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
        System.out.println(canvasPhotoBase64Data);
        return "123";
    }
}

感觉没啥问题，然而就是下面的错误

Access to XMLHttpRequest at 'http://localhost:8081/test/testUploadPhoto' from origin 'https://localhost:8044' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

于是我试着把前端的这部分删除了

beforeSend: function(xhr) {
	xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
},

然后就跑通了...不知道为啥把request请求的这个请求头删掉就行了，我把两个请求放在这对比一下，记录一下，以后有机会再来分析，有点忙暂时没时间分析了。

失败的跨域：

 

成功的跨域：

 

总结：

跨域这个真的是从最开始开发项目就经常遇到的问题，每次一遇到跨域的问题就是百度一通，把能加的配置一加，然后后面能跑通了就行了，这次跨域的失败让我发现其实跨域这个好像不需要配置太多，在后端增加几个参数就行了，不用前端后端加一堆东西，在此也算做个记录，如果下次再遇到跨域问题我看看是不是一样的。