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

admin管理员组

文章数量:1794759

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

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

前端是这样的：

$.ajax({ type: "post", url: "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 'localhost:8081/test/testUploadPhoto' from origin '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请求的这个请求头删掉就行了，我把两个请求放在这对比一下，记录一下，以后有机会再来分析，有点忙暂时没时间分析了。

失败的跨域：

 

成功的跨域：

 

总结：

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

 

 

 

 

 

 

本文标签： 报错preflightrequestpassresponse