跨域报错: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请求的这个请求头删掉就行了,我把两个请求放在这对比一下,记录一下,以后有机会再来分析,有点忙暂时没时间分析了。

失败的跨域:

跨域报错:Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origi_第1张图片

 

成功的跨域:

跨域报错:Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origi_第2张图片

 

总结:

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

 

 

 

 

 

 

你可能感兴趣的:(java-web,跨域,ajax跨域问题)