在編寫一個簡單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請求的這個請求頭刪掉就行了，我把兩個請求放在這對比一下，記錄一下，以后有機會再來分析，有點忙暫時沒時間分析了。

失敗的跨域：

?

成功的跨域：

?

總結：

跨域這個真的是從最開始開發項目就經常遇到的問題，每次一遇到跨域的問題就是百度一通，把能加的配置一加，然后后面能跑通了就行了，這次跨域的失敗讓我發現其實跨域這個好像不需要配置太多，在后端增加幾個參數就行了，不用前端后端加一堆東西，在此也算做個記錄，如果下次再遇到跨域問題我看看是不是一樣的。

?

?

?

?

?

?