$lang['tuto'] = "ಟ್ಯುಟೋರಿಯಲ್"; ?> ರಿಯಾಕ್ಟ್ ಮತ್ತು

ರಿಯಾಕ್ಟ್ ಮತ್ತು ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ CORS ಸಮಸ್ಯೆಗಳನ್ನು ಸರಿಪಡಿಸುವುದು: GET ವಿನಂತಿಯನ್ನು ನಿರ್ಬಂಧಿಸಲಾಗಿದೆ

Temp mail SuperHeros
ರಿಯಾಕ್ಟ್ ಮತ್ತು ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ CORS ಸಮಸ್ಯೆಗಳನ್ನು ಸರಿಪಡಿಸುವುದು: GET ವಿನಂತಿಯನ್ನು ನಿರ್ಬಂಧಿಸಲಾಗಿದೆ
ರಿಯಾಕ್ಟ್ ಮತ್ತು ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ CORS ಸಮಸ್ಯೆಗಳನ್ನು ಸರಿಪಡಿಸುವುದು: GET ವಿನಂತಿಯನ್ನು ನಿರ್ಬಂಧಿಸಲಾಗಿದೆ

ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ ಮತ್ತು ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ CORS ದೋಷಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಬಳಸಿ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ ಪ್ರತಿಕ್ರಿಯಿಸಿ ಮುಂಭಾಗಕ್ಕಾಗಿ ಮತ್ತು ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ ಬ್ಯಾಕೆಂಡ್‌ಗಾಗಿ, ಡೆವಲಪರ್‌ಗಳು ಎದುರಿಸುತ್ತಿರುವ ಸಾಮಾನ್ಯ ಸಮಸ್ಯೆಯು ಕುಖ್ಯಾತ CORS ದೋಷವಾಗಿದೆ. ಭದ್ರತಾ ಕಾರಣಗಳಿಂದಾಗಿ ಬ್ರೌಸರ್ ವಿನಂತಿಯನ್ನು ನಿರ್ಬಂಧಿಸಿದಾಗ, ವಿಶೇಷವಾಗಿ ಬೇರೆ ಪೋರ್ಟ್ ಅಥವಾ ಡೊಮೇನ್‌ನಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡಲಾದ ಬ್ಯಾಕೆಂಡ್ ಸೇವೆಗೆ ಸಂಪರ್ಕಿಸಲು ಪ್ರಯತ್ನಿಸಿದಾಗ ಈ ದೋಷ ಸಂಭವಿಸುತ್ತದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಒಂದು ಮಾಡುವಾಗ ನೀವು CORS ಸಮಸ್ಯೆಯನ್ನು ಎದುರಿಸುತ್ತಿರುವಿರಿ ವಿನಂತಿಯನ್ನು ಪಡೆಯಿರಿ ರಿಯಾಕ್ಟ್ ನಿಂದ ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ API ಗೆ.

ದೋಷ ಸಂದೇಶವು ಸಾಮಾನ್ಯವಾಗಿ ಬ್ರೌಸರ್ ನಿಮ್ಮ ವಿನಂತಿಯನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತಿದೆ ಎಂದು ಸೂಚಿಸುತ್ತದೆ ಪ್ರವೇಶ-ನಿಯಂತ್ರಣ-ಅನುಮತಿ-ಮೂಲ ಹೆಡರ್ ಕಾಣೆಯಾಗಿದೆ ಅಥವಾ ತಪ್ಪಾಗಿ ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾಗಿದೆ. ಉಪಕರಣಗಳು ಇಷ್ಟಪಡುವದನ್ನು ಗಮನಿಸುವುದು ಯೋಗ್ಯವಾಗಿದೆ ಪೋಸ್ಟ್ಮ್ಯಾನ್ ಈ ಭದ್ರತಾ ನಿರ್ಬಂಧಗಳನ್ನು ಜಾರಿಗೊಳಿಸಬೇಡಿ, ಅದಕ್ಕಾಗಿಯೇ ನಿಮ್ಮ ವಿನಂತಿಯು ಪೋಸ್ಟ್‌ಮ್ಯಾನ್‌ನಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಬಹುದು ಆದರೆ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ವಿಫಲವಾಗಬಹುದು.

ನಿಮ್ಮ ಸನ್ನಿವೇಶದಲ್ಲಿ, ಪೂರ್ವ ಫ್ಲೈಟ್ ವಿನಂತಿಯು ಪ್ರವೇಶ ನಿಯಂತ್ರಣ ಪರಿಶೀಲನೆಯನ್ನು ರವಾನಿಸುವುದಿಲ್ಲ ಎಂದು ದೋಷ ಸಂದೇಶವು ಸೂಚಿಸುತ್ತದೆ. ಕೆಲವು ಹೆಡರ್‌ಗಳು ಅಥವಾ ವಿಧಾನಗಳನ್ನು ಅನುಮತಿಸದಿದ್ದಾಗ ಅಥವಾ ಸರ್ವರ್‌ನ CORS ನೀತಿಯಲ್ಲಿ ಸರಿಯಾಗಿ ಕಾನ್ಫಿಗರ್ ಮಾಡಿದಾಗ ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಸಂಭವಿಸುತ್ತದೆ. CORS ಕಾನ್ಫಿಗರೇಶನ್ ಸರ್ವರ್ ಬದಿಯಲ್ಲಿ ಜಾರಿಯಲ್ಲಿರುವಂತೆ ತೋರುತ್ತಿರುವಾಗ, ಅದು ಬ್ರೌಸರ್ ವಿನಂತಿಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದರ ಕುರಿತು ನಿರ್ದಿಷ್ಟ ಸಮಸ್ಯೆಗಳಿರಬಹುದು.

ಈ ಲೇಖನವು ಸಮಸ್ಯೆಯ ಮೂಲ ಕಾರಣವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಪರಿಹರಿಸಲು ಸಂಭವನೀಯ ಪರಿಹಾರಗಳ ಮೂಲಕ ನಿಮಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡುತ್ತದೆ CORS ದೋಷ ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಮತ್ತು ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ.

ಆಜ್ಞೆ ಬಳಕೆಯ ಉದಾಹರಣೆ
@WebMvcConfigurer CORS, ಇಂಟರ್‌ಸೆಪ್ಟರ್‌ಗಳು ಮತ್ತು ಫಾರ್ಮ್ಯಾಟರ್‌ಗಳಂತಹ ವೆಬ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಲು ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ ಟಿಪ್ಪಣಿಯನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಈ ಸಮಸ್ಯೆಯ ಸಂದರ್ಭದಲ್ಲಿ, ನಿರ್ದಿಷ್ಟ ಮೂಲಗಳು ಮತ್ತು ವಿಧಾನಗಳನ್ನು ಅನುಮತಿಸುವ CORS ಮ್ಯಾಪಿಂಗ್ ನಿಯಮಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
allowedOrigins() ಈ ವಿಧಾನವು CORS ಕಾನ್ಫಿಗರೇಶನ್‌ನ ಭಾಗವಾಗಿದೆ ಮತ್ತು ಸರ್ವರ್ ಅನ್ನು ಪ್ರವೇಶಿಸಲು ಯಾವ ಮೂಲಗಳನ್ನು ಅನುಮತಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, 'http://localhost:8081' ನಲ್ಲಿ ಚಾಲನೆಯಲ್ಲಿರುವ ಮುಂಭಾಗವು ಬ್ಯಾಕೆಂಡ್‌ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಬಹುದೆಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
withCredentials() ಕುಕೀಸ್ ಮತ್ತು HTTP ದೃಢೀಕರಣದಂತಹ ರುಜುವಾತುಗಳನ್ನು ಸೇರಿಸಲು ಅಡ್ಡ-ಮೂಲ ವಿನಂತಿಗಳನ್ನು ಅನುಮತಿಸುವ Axios ಕಾನ್ಫಿಗರೇಶನ್. ಬಳಕೆದಾರ-ನಿರ್ದಿಷ್ಟ ಡೇಟಾ ಅಗತ್ಯವಿರುವ ಸುರಕ್ಷಿತ ವಿನಂತಿಗಳನ್ನು ನಿರ್ವಹಿಸುವಾಗ ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.
MockMvcRequestBuilders.options() ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್‌ನ MockMvc ಫ್ರೇಮ್‌ವರ್ಕ್‌ನಲ್ಲಿನ ಒಂದು ವಿಧಾನವನ್ನು HTTP ಆಯ್ಕೆಗಳ ವಿನಂತಿಯನ್ನು ಅನುಕರಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. CORS ನಲ್ಲಿ ಪ್ರಿಫ್ಲೈಟ್ ವಿನಂತಿಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ, ನಿಜವಾದ ವಿನಂತಿಯನ್ನು ಕಳುಹಿಸುವ ಮೊದಲು ಸರ್ವರ್ ಅನುಮತಿಯನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ.
HttpHeaders.ORIGIN ವಿನಂತಿಯ ಮೂಲವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಈ ಹೆಡರ್ ಅನ್ನು CORS ನಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ. ಕ್ರಾಸ್-ಆರಿಜಿನ್ ಸನ್ನಿವೇಶದಲ್ಲಿ, ಮೂಲವನ್ನು ಅನುಮತಿಸಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ಇದನ್ನು ಮುಂಭಾಗದಿಂದ ಸರ್ವರ್‌ಗೆ ಕಳುಹಿಸಲಾಗುತ್ತದೆ.
MockMvcResultMatchers.header() ಪ್ರತಿಕ್ರಿಯೆಯಲ್ಲಿ ನಿರ್ದಿಷ್ಟ HTTP ಹೆಡರ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಲು ಇದು ಘಟಕ ಪರೀಕ್ಷೆಯಲ್ಲಿ ಬಳಸಲಾಗುವ ವಿಧಾನವಾಗಿದೆ. ಪ್ರಿಫ್ಲೈಟ್ ವಿನಂತಿಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ 'ಪ್ರವೇಶ-ನಿಯಂತ್ರಣ-ಅನುಮತಿಸಿ-ಮೂಲ' ಹೆಡರ್ ಅನ್ನು ಸರಿಯಾಗಿ ಹಿಂತಿರುಗಿಸಲಾಗಿದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
Authorization: Bearer Axios ವಿನಂತಿಯಲ್ಲಿ, ಈ ಹೆಡರ್ ದೃಢೀಕರಣಕ್ಕಾಗಿ ಬೇರರ್ ಟೋಕನ್ ಅನ್ನು ರವಾನಿಸುತ್ತದೆ. ವಿನಂತಿಯನ್ನು ಮಾಡುವ ಕ್ಲೈಂಟ್‌ನ ಗುರುತನ್ನು ಬ್ಯಾಕೆಂಡ್ ಪರಿಶೀಲಿಸಬಹುದು ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
useEffect() ಘಟಕವನ್ನು ಪ್ರದರ್ಶಿಸಿದ ನಂತರ ಚಲಿಸುವ ರಿಯಾಕ್ಟ್ ಹುಕ್. ಈ ಸಂದರ್ಭದಲ್ಲಿ, API ಕರೆಯನ್ನು ಬ್ಯಾಕೆಂಡ್‌ಗೆ ಪ್ರಚೋದಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ, ಘಟಕವನ್ನು ಆರೋಹಿಸುವಾಗ ಪ್ರಾಜೆಕ್ಟ್ ಡೇಟಾವನ್ನು ಪಡೆಯುತ್ತದೆ.
axios.get() HTTP GET ವಿನಂತಿಗಳನ್ನು ಮಾಡಲು Axios ಒದಗಿಸಿದ ವಿಧಾನ. ಈ ಸನ್ನಿವೇಶದಲ್ಲಿ, ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ API ಗೆ ವಿನಂತಿಯನ್ನು ಕಳುಹಿಸಲು ಮತ್ತು ಯೋಜನೆಯ ಡೇಟಾವನ್ನು ಹಿಂಪಡೆಯಲು ಇದನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಮತ್ತು ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ CORS ದೋಷಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು

ಮೇಲೆ ಒದಗಿಸಿದ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿವೆ CORS ದೋಷಗಳು ರಿಯಾಕ್ಟ್ ಮುಂಭಾಗ ಮತ್ತು ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ ಬ್ಯಾಕೆಂಡ್ ಸೆಟಪ್‌ನಲ್ಲಿ. 'http://localhost:8081' ನಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡಲಾದ ಮುಂಭಾಗವು 'http://localhost:8080' ನಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡಲಾದ ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ API ಗೆ GET ವಿನಂತಿಯನ್ನು ಮಾಡಲು ಪ್ರಯತ್ನಿಸಿದಾಗ ದೋಷ ಸಂಭವಿಸುತ್ತದೆ. ಅನಧಿಕೃತ ಕ್ರಾಸ್-ಆರಿಜಿನ್ ವಿನಂತಿಗಳನ್ನು ತಡೆಯಲು ಬ್ರೌಸರ್‌ಗಳು ಕಟ್ಟುನಿಟ್ಟಾದ ಭದ್ರತಾ ನಿಯಮಗಳನ್ನು ಜಾರಿಗೊಳಿಸುತ್ತವೆ, ಅದಕ್ಕಾಗಿಯೇ ಈ CORS ನೀತಿಗಳು ಅಸ್ತಿತ್ವದಲ್ಲಿವೆ. ದಿ WebMvcConfigurer ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ ಬ್ಯಾಕೆಂಡ್ ಕಾನ್ಫಿಗರೇಶನ್‌ನಲ್ಲಿನ ವರ್ಗವು ನಿರ್ದಿಷ್ಟ ಮೂಲಗಳು ಮತ್ತು ವಿಧಾನಗಳನ್ನು ಅನುಮತಿಸುವ CORS ನಿಯಮಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಅಂತಿಮವಾಗಿ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತದೆ.

ಬ್ಯಾಕೆಂಡ್‌ನಲ್ಲಿ, `CorsConfig.java` ಫೈಲ್ ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ ಕಾನ್ಫಿಗರೇಶನ್ ವರ್ಗವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ದಿ @ಬೀನ್ ಮತ್ತು @ಅತಿಕ್ರಮಿಸಿ CORS ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಇಂಜೆಕ್ಟ್ ಮಾಡಲು ಮತ್ತು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಟಿಪ್ಪಣಿಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. `addCorsMappings()` ವಿಧಾನದಲ್ಲಿ, `AllowedOrigins()` ಕಾರ್ಯವು 'http://localhost:8081' ನಿಂದ ವಿನಂತಿಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಅನುಮತಿಸುತ್ತದೆ, ಬ್ರೌಸರ್ ಈ ಮೂಲವನ್ನು ವಿಶ್ವಾಸಾರ್ಹ ಮೂಲವಾಗಿ ಗುರುತಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. GET, POST ಮತ್ತು OPTIONS ಸೇರಿದಂತೆ ಎಲ್ಲಾ HTTP ವಿಧಾನಗಳನ್ನು ಅನುಮತಿಸಲಾಗಿದೆ ಎಂದು `ಅನುಮತಿಸಿದ ವಿಧಾನಗಳು()` ಸೇರ್ಪಡೆ ಖಚಿತಪಡಿಸುತ್ತದೆ. ನಿಜವಾದ GET ವಿನಂತಿಯನ್ನು ಅನುಮತಿಸಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ಬ್ರೌಸರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರಿಫ್ಲೈಟ್ OPTIONS ವಿನಂತಿಯನ್ನು ಕಳುಹಿಸುವುದರಿಂದ ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.

ಮುಂಭಾಗದಲ್ಲಿ, ರಿಯಾಕ್ಟ್ ಬಳಸಿ ವಿನಂತಿಗಳನ್ನು ನಿಭಾಯಿಸುತ್ತದೆ ಆಕ್ಸಿಯೋಸ್, ಜನಪ್ರಿಯ HTTP ಕ್ಲೈಂಟ್. `ProjectPage.tsx` ಫೈಲ್‌ನ `fetchData` ಕಾರ್ಯದಲ್ಲಿ, `axios.get()` ಕಾರ್ಯವು ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ ಬ್ಯಾಕೆಂಡ್‌ಗೆ GET ವಿನಂತಿಯನ್ನು ಕಳುಹಿಸುತ್ತದೆ. `withCredentials` ಆಯ್ಕೆಯನ್ನು ಸರಿ ಎಂದು ಹೊಂದಿಸಲಾಗಿದೆ, ಕುಕೀಗಳು ಮತ್ತು ದೃಢೀಕರಣ ರುಜುವಾತುಗಳನ್ನು ವಿನಂತಿಯೊಂದಿಗೆ ಕಳುಹಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಬಳಕೆದಾರರ ಟೋಕನ್ ಅನ್ನು ರವಾನಿಸಲು ದೃಢೀಕರಣ ಹೆಡರ್ ಅನ್ನು ಸೇರಿಸಲಾಗಿದೆ, ವಿನಂತಿಯನ್ನು ಸರಿಯಾಗಿ ದೃಢೀಕರಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಈ ಕಾನ್ಫಿಗರೇಶನ್‌ಗಳಿಲ್ಲದೆಯೇ, ಭದ್ರತಾ ಕಾರಣಗಳಿಂದ ಬ್ರೌಸರ್ ವಿನಂತಿಯನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ.

ಕೊನೆಯದಾಗಿ, ಯುನಿಟ್ ಟೆಸ್ಟ್ ಫೈಲ್, `CorsTest.java`, CORS ಕಾನ್ಫಿಗರೇಶನ್ ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದೆ ಎಂದು ಮೌಲ್ಯೀಕರಿಸುತ್ತದೆ. ಈ ಪರೀಕ್ಷೆಯು ಬ್ಯಾಕೆಂಡ್ API ಗೆ HTTP OPTIONS ವಿನಂತಿಯನ್ನು ಅನುಕರಿಸುತ್ತದೆ, ಇದು ಬ್ರೌಸರ್‌ನಿಂದ ಮಾಡಿದ ನಿಜವಾದ ಪ್ರಿಫ್ಲೈಟ್ ವಿನಂತಿಯನ್ನು ಅನುಕರಿಸುತ್ತದೆ. ಪ್ರತಿಕ್ರಿಯೆಯು ಸರಿಯಾದ ಹೆಡರ್‌ಗಳನ್ನು ಹೊಂದಿದೆಯೇ ಎಂದು ಪರೀಕ್ಷೆಯು ಪರಿಶೀಲಿಸುತ್ತದೆ, ಉದಾಹರಣೆಗೆ ಪ್ರವೇಶ-ನಿಯಂತ್ರಣ-ಅನುಮತಿ-ಮೂಲ, ಇದು ಮುಂಭಾಗದಿಂದ ಅಡ್ಡ-ಮೂಲದ ವಿನಂತಿಗಳನ್ನು ಅನುಮತಿಸುತ್ತದೆ. `MockMvcResultMatchers.header()` ವಿಧಾನವು ಪ್ರಿಫ್ಲೈಟ್ ವಿನಂತಿಗಳಿಗೆ ಸರ್ವರ್ ಸರಿಯಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಘಟಕ ಪರೀಕ್ಷೆಗಳನ್ನು ಸೇರಿಸುವ ಮೂಲಕ, ಡೆವಲಪರ್‌ಗಳು ತಮ್ಮ CORS ಕಾನ್ಫಿಗರೇಶನ್ ವಿಶ್ವಾಸಾರ್ಹ ಮತ್ತು ವಿವಿಧ ಪರಿಸರಗಳಲ್ಲಿ ಕ್ರಿಯಾತ್ಮಕವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು.

ಕಾನ್ಫಿಗರೇಶನ್ ಟ್ವೀಕ್‌ಗಳೊಂದಿಗೆ ರಿಯಾಕ್ಟ್ + ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್‌ನಲ್ಲಿ CORS ದೋಷಗಳನ್ನು ಪರಿಹರಿಸುವುದು

ವಿಧಾನ 1: ಬ್ಯಾಕೆಂಡ್‌ನಲ್ಲಿ ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ CORS ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಬಳಸುವುದು

// CorsConfig.java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
   @Override
   public void addCorsMappings(CorsRegistry registry) {
      registry.addMapping("/")
              .allowedOrigins("http://localhost:8081")
              .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
              .allowedHeaders("*")
              .allowCredentials(true);
   }
}

ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಕುಕೀಗಳೊಂದಿಗೆ ಸರಿಯಾದ CORS ನಿರ್ವಹಣೆಗಾಗಿ Axios ಅನ್ನು ಬಳಸುವುದು

ವಿಧಾನ 2: ಕ್ರಾಸ್-ಆರಿಜಿನ್ ವಿನಂತಿಗಳಿಗಾಗಿ ರಿಯಾಕ್ಟ್ ಫ್ರಂಟೆಂಡ್ ಆಕ್ಸಿಯೋಸ್ ಕಾನ್ಫಿಗರೇಶನ್

// ProjectPage.tsx
const ProjectsPage = () => {
   const [projectsData, setProjectsData] = useState<ProjectsData[]>([]);
   const projectsUrl = 'http://localhost:8080/api/projects/admin/toinspection';
   useEffect(() => { fetchData(); }, []);
   const fetchData = async () => {
      const token = Cookies.get('token');
      try {
         const response = await axios.get<ProjectsData[]>(projectsUrl, {
            headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
            withCredentials: true
         });
         setProjectsData(response.data);
      } catch (error) {
         console.error("Error fetching projects:", error);
      }
   };
   return (
      <div>
         <AdminPageTemplate type="projects" children=<AdminModContent data={projectsData} />/>
      </div>
   );
};
export default ProjectsPage;

ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್‌ನಲ್ಲಿ ಯುನಿಟ್ ಪರೀಕ್ಷೆಗಳೊಂದಿಗೆ CORS ನೀತಿಗಳನ್ನು ಪರೀಕ್ಷಿಸಲಾಗುತ್ತಿದೆ

ವಿಧಾನ 3: CORS ನೀತಿಯನ್ನು ಮೌಲ್ಯೀಕರಿಸಲು ಘಟಕ ಪರೀಕ್ಷೆಗಳನ್ನು ಬರೆಯುವುದು

// CorsTest.java
@RunWith(SpringRunner.class)
@WebMvcTest
public class CorsTest {
   @Autowired
   private MockMvc mockMvc;
   @Test
   public void testCorsHeaders() throws Exception {
      mockMvc.perform(MockMvcRequestBuilders.options("/api/projects/admin/toinspection")
              .header(HttpHeaders.ORIGIN, "http://localhost:8081")
              .header(HttpHeaders.ACCESS_CONTROL_REQUEST_METHOD, "GET"))
              .andExpect(MockMvcResultMatchers.status().isOk())
              .andExpect(MockMvcResultMatchers.header().exists("Access-Control-Allow-Origin"))
              .andExpect(MockMvcResultMatchers.header().string("Access-Control-Allow-Origin", "http://localhost:8081"));
   }
}

ಭದ್ರತೆ ಮತ್ತು API ವಿನ್ಯಾಸದ ಸಂದರ್ಭದಲ್ಲಿ CORS ಅನ್ನು ಅನ್ವೇಷಿಸಲಾಗುತ್ತಿದೆ

ವ್ಯವಹರಿಸುವಾಗ CORS (ಕ್ರಾಸ್-ಆರಿಜಿನ್ ಸಂಪನ್ಮೂಲ ಹಂಚಿಕೆ) ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ, ಅದರ ಹಿಂದಿನ ಭದ್ರತಾ ಪರಿಣಾಮಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ದುರುದ್ದೇಶಪೂರಿತ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಬಳಕೆದಾರರ ಪರವಾಗಿ ಅನಧಿಕೃತ API ವಿನಂತಿಗಳನ್ನು ಮಾಡುವುದನ್ನು ತಡೆಯಲು CORS ಅನ್ನು ಬ್ರೌಸರ್‌ಗಳಿಂದ ಭದ್ರತಾ ಕ್ರಮವಾಗಿ ಅಳವಡಿಸಲಾಗಿದೆ. ದೃಢೀಕರಣ ಟೋಕನ್‌ಗಳು ಮತ್ತು ಬಳಕೆದಾರರ ರುಜುವಾತುಗಳಂತಹ ಮುಂಭಾಗ ಮತ್ತು ಬ್ಯಾಕೆಂಡ್ ಸೇವೆಗಳ ನಡುವೆ ಸೂಕ್ಷ್ಮ ಡೇಟಾವನ್ನು ವಿನಿಮಯ ಮಾಡಿಕೊಳ್ಳುವ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಇದು ವಿಶೇಷವಾಗಿ ಮುಖ್ಯವಾಗಿದೆ. ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ ಬ್ಯಾಕೆಂಡ್‌ನಲ್ಲಿ CORS ಅನ್ನು ಹೊಂದಿಸುವಾಗ, ಸಂರಕ್ಷಿತ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಪ್ರವೇಶಿಸಲು ವಿಶ್ವಾಸಾರ್ಹ ಮೂಲಗಳನ್ನು ಮಾತ್ರ ಅನುಮತಿಸುವುದು ಅತ್ಯಗತ್ಯ, ಭದ್ರತಾ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಸಿಸ್ಟಮ್‌ನ ಆರ್ಕಿಟೆಕ್ಚರ್‌ನ ಪ್ರಮುಖ ಅಂಶವನ್ನಾಗಿ ಮಾಡುತ್ತದೆ.

ಮತ್ತೊಂದು ನಿರ್ಣಾಯಕ ಅಂಶವೆಂದರೆ ಪ್ರಿಫ್ಲೈಟ್ ವಿನಂತಿಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು, ಇದು ನಿಜವಾದ GET ಅಥವಾ POST ವಿನಂತಿಯ ಮೊದಲು ಬ್ರೌಸರ್ ಮಾಡಿದ ಸ್ವಯಂಚಾಲಿತ ವಿನಂತಿಗಳು. ಸರ್ವರ್ ಕ್ರಾಸ್-ಆರಿಜಿನ್ ವಿನಂತಿಗಳನ್ನು ಅನುಮತಿಸುತ್ತದೆ ಮತ್ತು ನಿರ್ದಿಷ್ಟ ಹೆಡರ್ ಅಥವಾ ವಿಧಾನಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆಯೇ ಎಂಬುದನ್ನು ಕ್ಲೈಂಟ್ ದೃಢೀಕರಿಸಬೇಕಾದಾಗ ಇದು ಸಂಭವಿಸುತ್ತದೆ. ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, ಇವುಗಳನ್ನು ನಿರ್ವಹಿಸುವಲ್ಲಿ ತಪ್ಪು ಸಂರಚನೆಗಳು ಪ್ರಿಫ್ಲೈಟ್ ವಿನಂತಿಗಳು ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು, ಪೋಸ್ಟ್‌ಮ್ಯಾನ್‌ನಂತಹ ಪರಿಕರಗಳಲ್ಲಿ ನಿಜವಾದ ವಿನಂತಿಯು ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಿದಾಗಲೂ CORS ದೋಷಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್‌ನ `CorsRegistry` ಅನ್ನು ಸರಿಯಾದ ಹೆಡರ್‌ಗಳು ಮತ್ತು ವಿಧಾನಗಳೊಂದಿಗೆ ಕಾನ್ಫಿಗರ್ ಮಾಡುವುದರಿಂದ ಪ್ರಿಫ್ಲೈಟ್ ವಿನಂತಿಗಳನ್ನು ಸರಿಯಾಗಿ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಮುಂಭಾಗ ಮತ್ತು ಬ್ಯಾಕೆಂಡ್ ನಡುವೆ ಸುಗಮ ಸಂವಹನವನ್ನು ಅನುಮತಿಸುತ್ತದೆ.

ಮೇಲಾಗಿ, CORS ನಿರ್ವಹಣೆಯು ಸ್ಥಿರವಾಗಿರಬಾರದು ಅಥವಾ ಒಂದೇ ಗಾತ್ರಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗಬಾರದು. ಮೈಕ್ರೋಸರ್ವಿಸ್‌ನೊಂದಿಗೆ ನಿರ್ವಹಿಸಲ್ಪಡುವಂತಹ ಡೈನಾಮಿಕ್ ಪರಿಸರದಲ್ಲಿ, ವಿಭಿನ್ನ API ಗಳು ವಿಭಿನ್ನ ಭದ್ರತಾ ಅವಶ್ಯಕತೆಗಳನ್ನು ಹೊಂದಿರಬಹುದು. ಕೆಲವು API ಗಳು ಕೆಲವು ವಿಧಾನಗಳನ್ನು ಮಾತ್ರ ಬಹಿರಂಗಪಡಿಸಬೇಕಾಗಬಹುದು, ಆದರೆ ಇತರರಿಗೆ ಮೂಲಗಳ ಮೇಲೆ ಕಟ್ಟುನಿಟ್ಟಾದ ನಿಯಂತ್ರಣದ ಅಗತ್ಯವಿರುತ್ತದೆ. ಇಲ್ಲಿ ಪ್ರತಿ ಅಂತಿಮ ಬಿಂದುವಿಗೆ CORS ಸಂರಚನೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸುವುದು ಮುಖ್ಯವಾಗುತ್ತದೆ. ಸರಿಯಾದ CORS ನಿರ್ವಹಣೆಯು ಅನಗತ್ಯ ಪ್ರಿಫ್ಲೈಟ್ ವಿನಂತಿಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಮೂಲಕ ಮತ್ತು ಸುಗಮ ಬಳಕೆದಾರರ ಸಂವಹನವನ್ನು ಖಾತ್ರಿಪಡಿಸುವ ಮೂಲಕ API ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅತ್ಯುತ್ತಮವಾಗಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಮತ್ತು ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್‌ನಲ್ಲಿ CORS ಕುರಿತು ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು

  1. CORS ಎಂದರೇನು, ಮತ್ತು ನನಗೆ ಅದು ಏಕೆ ಬೇಕು?
  2. CORS ಎನ್ನುವುದು ಕ್ರಾಸ್-ಆರಿಜಿನ್ ವಿನಂತಿಗಳನ್ನು ಅನುಮತಿಸಲು ಅಥವಾ ನಿರ್ಬಂಧಿಸಲು ಬ್ರೌಸರ್‌ಗಳಿಂದ ಜಾರಿಗೊಳಿಸಲಾದ ಭದ್ರತಾ ಕಾರ್ಯವಿಧಾನವಾಗಿದೆ. ವಿಶ್ವಾಸಾರ್ಹ ಮೂಲಗಳು ಮಾತ್ರ ನಿಮ್ಮ API ಅನ್ನು ಪ್ರವೇಶಿಸಬಹುದು ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮಗೆ ಇದು ಅಗತ್ಯವಿದೆ.
  3. ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್‌ನಲ್ಲಿ ನಾನು CORS ಅನ್ನು ಹೇಗೆ ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು?
  4. ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್‌ನಲ್ಲಿ, ಕಾನ್ಫಿಗರ್ ಮಾಡುವ ಮೂಲಕ ನೀವು CORS ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು @WebMvcConfigurer ಇಂಟರ್ಫೇಸ್ ಮತ್ತು ಅನುಮತಿಸಲಾದ ಮೂಲಗಳು, ವಿಧಾನಗಳು ಮತ್ತು ಹೆಡರ್ಗಳನ್ನು ಬಳಸುವುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವುದು allowedOrigins ಮತ್ತು allowedMethods.
  5. ನನ್ನ ವಿನಂತಿಯು ಪೋಸ್ಟ್‌ಮ್ಯಾನ್‌ನಲ್ಲಿ ಏಕೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಆದರೆ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ವಿಫಲಗೊಳ್ಳುತ್ತದೆ?
  6. ಪೋಸ್ಟ್‌ಮ್ಯಾನ್ CORS ನಂತಹ ಬ್ರೌಸರ್ ಭದ್ರತಾ ನೀತಿಗಳನ್ನು ಬೈಪಾಸ್ ಮಾಡುತ್ತಾರೆ, ಆದರೆ ಬ್ರೌಸರ್‌ಗಳು ಅವುಗಳನ್ನು ಕಟ್ಟುನಿಟ್ಟಾಗಿ ಜಾರಿಗೊಳಿಸುತ್ತವೆ. ನಿಮ್ಮ ಸರ್ವರ್ ಸರಿಯಾದ CORS ಹೆಡರ್‌ಗಳನ್ನು ಬ್ರೌಸರ್‌ಗೆ ಕಳುಹಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
  7. ಪ್ರಿಫ್ಲೈಟ್ ವಿನಂತಿ ಎಂದರೇನು?
  8. ಪ್ರಿಫ್ಲೈಟ್ ವಿನಂತಿಯು ಸ್ವಯಂಚಾಲಿತವಾಗಿದೆ OPTIONS ನಿರ್ದಿಷ್ಟವಾಗಿ ಸರಳವಲ್ಲದ HTTP ವಿನಂತಿಗಳಿಗಾಗಿ, ಸರ್ವರ್‌ನಿಂದ ನಿಜವಾದ ವಿನಂತಿಯನ್ನು ಅನುಮತಿಸಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ಬ್ರೌಸರ್‌ನಿಂದ ವಿನಂತಿಯನ್ನು ಕಳುಹಿಸಲಾಗಿದೆ.
  9. ನನ್ನ CORS ಸೆಟಪ್ ಅನ್ನು ನಾನು ಹೇಗೆ ಪರೀಕ್ಷಿಸಬಹುದು?
  10. ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ CORS ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ನೀವು ಪರೀಕ್ಷಿಸಬಹುದು MockMvcRequestBuilders.options() ಪ್ರಿಫ್ಲೈಟ್ ವಿನಂತಿಗಳನ್ನು ಅನುಕರಿಸಲು ಮತ್ತು ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಪರಿಶೀಲಿಸಲು ಘಟಕ ಪರೀಕ್ಷೆಗಳಲ್ಲಿ.

ರಿಯಾಕ್ಟ್ ಮತ್ತು ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್‌ನಲ್ಲಿ CORS ನಲ್ಲಿ ಅಂತಿಮ ಆಲೋಚನೆಗಳು

ಪರಿಹರಿಸುವುದು CORS ದೋಷಗಳು ರಿಯಾಕ್ಟ್ ಮತ್ತು ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ ಹೊಂದಿರುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಬ್ರೌಸರ್‌ಗಳು ಜಾರಿಗೊಳಿಸಿದ ಭದ್ರತಾ ನೀತಿಗಳ ಸ್ಪಷ್ಟ ತಿಳುವಳಿಕೆಯನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ ಬ್ಯಾಕೆಂಡ್‌ನಲ್ಲಿ ಅನುಮತಿಸಲಾದ ಮೂಲಗಳು ಮತ್ತು ವಿಧಾನಗಳನ್ನು ಸರಿಯಾಗಿ ಕಾನ್ಫಿಗರ್ ಮಾಡುವ ಮೂಲಕ, ಈ ಹೆಚ್ಚಿನ ಸಮಸ್ಯೆಗಳನ್ನು ತಡೆಯಬಹುದು.

ಹೆಚ್ಚುವರಿಯಾಗಿ, ವಿನಂತಿಗಳಲ್ಲಿ ಟೋಕನ್‌ಗಳನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ನಿರ್ವಹಿಸುವುದು ಮತ್ತು ಸರಿಯಾದ ಹೆಡರ್‌ಗಳನ್ನು ಕಳುಹಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಮುಂಭಾಗ ಮತ್ತು ಬ್ಯಾಕೆಂಡ್ ಸಿಸ್ಟಮ್‌ಗಳ ನಡುವೆ ಸುಗಮ ಸಂವಹನವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಈ ಮಾರ್ಗದರ್ಶಿ ಡೆವಲಪರ್‌ಗಳು ಎದುರಿಸುತ್ತಿರುವ ಸಾಮಾನ್ಯ ಸವಾಲುಗಳನ್ನು ಪರಿಹರಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಸುರಕ್ಷಿತ ಮತ್ತು ಕ್ರಿಯಾತ್ಮಕ ಅಡ್ಡ-ಮೂಲ ವಿನಂತಿಗಳನ್ನು ಖಾತ್ರಿಪಡಿಸುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಮತ್ತು ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್‌ನಲ್ಲಿ CORS ಪರಿಹಾರಗಳಿಗಾಗಿ ಮೂಲಗಳು ಮತ್ತು ಉಲ್ಲೇಖಗಳು
  1. ನಿರ್ವಹಣೆಯ ಬಗ್ಗೆ ವಿವರವಾದ ಮಾಹಿತಿ CORS ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿನ ದೋಷಗಳು ಅಧಿಕೃತ ಸ್ಪ್ರಿಂಗ್ ದಸ್ತಾವೇಜನ್ನು ಲಭ್ಯವಿದೆ. ಸ್ಪ್ರಿಂಗ್ ಫ್ರೇಮ್ವರ್ಕ್ CORS ಡಾಕ್ಯುಮೆಂಟೇಶನ್
  2. Axios ಬಳಸಿಕೊಂಡು ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ CORS ಅನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುವುದು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು, ನೀವು ಈ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಉಲ್ಲೇಖಿಸಬಹುದು. Axios ವಿನಂತಿ ಕಾನ್ಫಿಗರೇಶನ್
  3. Baeldung ನಿಂದ ಈ ಲೇಖನವು ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ ಪರಿಸರದಲ್ಲಿ CORS ಅನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡುವ ಒಳನೋಟಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. Baeldung - ಸ್ಪ್ರಿಂಗ್ ಬೂಟ್ CORS ಮಾರ್ಗದರ್ಶಿ
  4. ಮೊಜಿಲ್ಲಾ ಡೆವಲಪರ್ ನೆಟ್‌ವರ್ಕ್ (MDN) CORS ಮತ್ತು ವೆಬ್ ಭದ್ರತೆಯಲ್ಲಿ ಅದರ ಪ್ರಾಮುಖ್ಯತೆಯ ಸಮಗ್ರ ವಿವರಣೆಯನ್ನು ನೀಡುತ್ತದೆ. MDN ವೆಬ್ ಡಾಕ್ಸ್ - CORS