ChatGPT：SpringBoot解決跨域問題方法-手動設置請求頭
這里的設置響應頭是為了發送請求方還是接收請求方
設置響應頭是為了發送請求方。具體來說，添加 Access-Control-Allow-Origin 頭部是為了告訴瀏覽器，哪些域名可以訪問資源。當設置為 * 時，表示允許所有域名訪問。這個設置主要用于解決跨域資源共享（CORS）問題。
代碼示例解釋：
@RequestMapping("/index")
public String index(HttpServletResponse response) {response.addHeader("Access-Allow-Control-Origin", "*");return "index";
}
在這個代碼中，當客戶端（如瀏覽器）訪問 /index 端點時，服務器會在響應頭中添加 Access-Allow-Control-Origin: *，表示允許任何域名訪問該資源。這樣做的目的是讓瀏覽器知道它可以接受該響應，即使請求來自于不同的域名。
需要注意的是，這種方式雖然方便，但使用 * 允許所有域名訪問可能存在安全隱患，通常在生產環境中會指定具體的域名，而不是使用 *。
所以防止跨域是誰做出的舉動呢
防止跨域請求的措施主要是由瀏覽器做出的。具體來說，瀏覽器會根據同源策略（Same-Origin Policy）來阻止從一個域名向另一個域名發起的未經授權的請求。
同源策略
同源策略是一種重要的安全機制，它阻止了一個源（域名、協議和端口）下的文檔或腳本從另一個源請求資源。這意味著，只有當請求的資源與當前文檔的源相同時，瀏覽器才會允許請求通過。
跨域資源共享 (CORS)
跨域資源共享（CORS, Cross-Origin Resource Sharing）是由服務器來決定是否允許跨域請求的一種機制。服務器通過設置適當的響應頭來告訴瀏覽器，哪些源可以訪問其資源。最常見的響應頭是 Access-Control-Allow-Origin。
流程示意
- 瀏覽器發起請求：當瀏覽器檢測到一個跨域請求時（如 AJAX 請求），它會首先發送一個預檢請求（OPTIONS 請求）到服務器，詢問服務器是否允許跨域請求。
- 服務器響應預檢請求：服務器響應預檢請求，并在響應頭中包括
Access-Control-Allow-Origin和其他 CORS 相關頭部信息。 - 瀏覽器根據響應決定是否發出實際請求：如果服務器允許跨域請求，瀏覽器會繼續發送實際的請求。如果服務器不允許，瀏覽器會阻止請求，并向客戶端返回錯誤。
代碼示例
在你的代碼中，服務器通過設置響應頭來允許跨域請求：
@RequestMapping("/index")
public String index(HttpServletResponse response) {response.addHeader("Access-Control-Allow-Origin", "*");return "index";
}
當瀏覽器接收到這個響應頭時，它就知道可以接受該響應，即使請求來自于不同的源。
總結
防止跨域請求的主要措施是由瀏覽器實施的，同源策略確保了一個源無法未經授權訪問另一個源的資源。服務器通過設置適當的 CORS 響應頭，可以允許合法的跨域請求。
可是按下f12進行調試并沒有看到有預檢請求啊
并不是所有的跨域請求都會觸發預檢請求（OPTIONS 請求）。預檢請求通常在以下情況中觸發：
- 使用的 HTTP 方法不是 GET、POST 或 HEAD。
- 使用的自定義頭部字段（如
X-Custom-Header）。 - 請求的內容類型（Content-Type）不是以下三種之一：
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
如果你的跨域請求是一個簡單請求（Simple Request），那么它不會觸發預檢請求。簡單請求包括以下幾種情況：
- 使用 GET、POST 或 HEAD 方法。
- 不包含自定義頭部。
- 請求的內容類型是上述三種之一。
示例說明
假設你在使用 JavaScript 發起一個跨域請求：
fetch('http://example.com/index', {method: 'GET',headers: {'Content-Type': 'application/json'}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
這個請求是一個簡單請求，不會觸發預檢請求。瀏覽器會直接發出 GET 請求，并根據服務器的響應頭判斷是否允許跨域。
如何查看請求頭
在瀏覽器的開發者工具中，可以按以下步驟查看請求和響應頭：
- 按
F12打開開發者工具。 - 轉到“Network”（網絡）選項卡。
- 發起跨域請求。
- 在請求列表中找到對應的請求，點擊它。
- 在右側面板中查看“Headers”（頭部）信息，包括請求頭和響應頭。
檢查預檢請求
如果你希望確認是否有預檢請求被發出，可以嘗試以下方法：
- 修改請求方法為非簡單請求方法（如 PUT、DELETE 等）。
- 添加自定義頭部字段（如
X-Custom-Header）。 - 修改請求的
Content-Type為非簡單請求的類型（如application/json）。
例如：
fetch('http://example.com/index', {method: 'POST',headers: {'Content-Type': 'application/json','X-Custom-Header': 'value'},body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
此時，瀏覽器應該會先發出一個預檢請求（OPTIONS），你可以在開發者工具的網絡選項卡中看到這個預檢請求。
