Angular + SpringBoot 項目跨域問題

? 由于項目的需要，最近一段時間都在學習Angular，正好之前無聊寫了一個后端的CRUD的demo，索性就將前后端整合起來。

? 整體的思路是，前端由Angular發送一個get請求(import HttpClient組件)，請求通過Http，發送到Controller層，然后途經三層架構，訪問數據庫。然后后端返回的json數據發給前端解析。本以為這個demo特別簡單，沒有什么技術難點，邏輯也不復雜。結果在前端發送get請求的時候出了問題，但是身經百戰的小編內心毫無波動。直接F12查看Console，有沒有Exception，果不其然，異常見下 (CORS policy) 在跨域這個地方出了問題。

CORS

Cross-Origin Resource Sharing

意為跨域資源共享,當一個資源去訪問另一個不同域名或者同域名不同端口的資源時，就會發出跨域請求。如果此時另一個資源不允許其進行跨域資源訪問，那么訪問的那個資源就會遇到跨域問題。

同源策略的保護

源(origin)：就是協議(http)、域名(localhost)、端口號(8080)

當源不同的時候就算跨域，就算僅僅只是端口號不同，跨域微服務架構中常見問題，如果沒有配置跨域，請求就會失敗。

跨域解決

1、在controller上加注解

@CrossOrigin(origins = {"http://localhost:4200","null"})

2、全局配置

package com.example.Default;import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.EnableWebMvc; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;/*** Created by BLIT on 2020/8/19.*/ @Configuration @EnableWebMvc public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {//設置允許跨域的路徑registry.addMapping("/**")//設置允許跨域請求的域名.allowedOrigins("*") //也可以指定域名 .allowedOrigins("http://192.168.0.0:8080","http://192.168.0.1:8081")//是否允許證書 不再默認開啟.allowCredentials(true)//設置允許的方法.allowedMethods("*")//跨域允許時間.maxAge(3600);}}

出現問題原因

看了上面那段跨域的介紹，就知道了，我前段項目的訪問地址是localhost:4200，后端提供的訪問接口是localhost:28089，這里端口號不一樣，所以出現同源跨域問題，需要使用上面兩種方法中的一種，建議第二種，方便快捷。

Access to XMLHttpRequest at 'http://localhost:28089/user/list' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

總結

出現問題不要慌，解決問題就三板斧，第一步，快速定位問題；第二步分析問題；第三部選出最優的解決方案。最重要還有一點，盡量避免下次再遇到類似的問題

總結

以上是生活随笔為你收集整理的跨域 CORS policy的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。