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

Myth丶恋晨 2022-12-29 09:19 148阅读 0赞

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

失败的跨域：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E2MTAzNzY2ODE_size_16_color_FFFFFF_t_70][]

成功的跨域：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E2MTAzNzY2ODE_size_16_color_FFFFFF_t_70 1][]

总结：

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E2MTAzNzY2ODE_size_16_color_FFFFFF_t_70]: /images/20221120/662f7862fa284a1e912f11761c626cad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E2MTAzNzY2ODE_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020122116412583.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3E2MTAzNzY2ODE=,size_16,color_FFFFFF,t_70

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关解决Request header field XXX is not allowed by access-control-allow-headers in preflight response

相关 Request header field xxxx is not allowed by Access-Control-Allow-Headers in preflight response问题

相关 response设置响应头，解决跨域请求问题，No 'Access-Control-Allow-Origin' header is present on the requested resource

相关 Vue报错has been blocked by CORS policy: Response to preflight request doesn‘t pass access controlcheck

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

相关 Request header field * is not allowed by Access-Control-Allow-Headers in preflight response问题解决

相关 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' he

相关 Nginx解决跨域问题No 'Access-Control-Allow-Origin'

相关跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested resource

相关报错：跨域问题解决 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.