前后端分離跨域問題的幾種解決方案
一、為什么會出現(xiàn)跨域問題?
出于瀏覽器的同源策略限制。
同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響?？梢哉fWeb是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對同源策略的一種實現(xiàn)。同源策略會阻止一個域的javascript腳本和另外一個域的內(nèi)容進(jìn)行交互。所謂同源（即指在同一個域）就是兩個頁面具有相同的協(xié)議（protocol），主機（host）和端口號（port） 。
二、什么是跨域?
當(dāng)一個請求url的協(xié)議、域名、端口三者之間任意一個與當(dāng)前頁面url不同即為跨域。
兩個相同的源之間瀏覽器默認(rèn)其是可以相互訪問資源和操作DOM的。
兩個不同的源之間 若想要相互訪問資源或者操作DOM，那么會有一套基礎(chǔ)的安全策略的制約。
三、解決方案
?1.前臺服務(wù)端解決方案（略）
2、后臺服務(wù)端解決方案
方法一：@CrossOrigin
注意：
1、springMVC的版本要在4.2或以上版本才支持@CrossOrigin
2、非@CrossOrigin沒有解決跨域請求問題，而是不正確的請求導(dǎo)致無法得到預(yù)期的響應(yīng)，導(dǎo)致瀏覽器端提示跨域問題。
3、在Controller注解上方添加@CrossOrigin注解后，仍然出現(xiàn)跨域問題，
解決方案之一就是：在@RequestMapping注解中沒有指定Get、Post方式，具體指定后，問題解決。
其中@CrossOrigin中的2個參數(shù)：
origins? ： 允許可訪問的域列表
maxAge：準(zhǔn)備響應(yīng)前的緩存持續(xù)的最大時間（以秒為單位）。
可以配置在Controller上 也可以配置在方法上
*/@CrossOrigin
@RestController
public class person{
??? @RequestMapping(method = RequestMethod.GET)
??? public String add() {
??????? // 若干代碼
??? }
}
@RestController@RequestMapping("/account")
public class AccountController {
??? @CrossOrigin
??? @GetMapping("/{id}")
??? public Account retrieve(@PathVariable Long id) {
??????? // ...
??? }
}?
方法二 過濾器
public class CORSFilter implements Filter {
???? @Override
???? public void destroy() {
?????????? // TODO Auto-generated method stub
???? }
???? @Override
???? public void doFilter(ServletRequest req, ServletResponse res,
??????????????? FilterChain chain) throws IOException, ServletException {
?????????? ? HttpServletResponse response = (HttpServletResponse) res;?
?????????? //表示所有的域都可以接受
???? ??????? response.setHeader("Access-Control-Allow-Origin", "*");?
??????????????? //允許訪問的方法
???? ??????? response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");?
????????????? //請求得到結(jié)果的有效期
???? ??????? response.setHeader("Access-Control-Max-Age", "3600");?
???? ???? ???response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");?
?????????? //:?該值是一個布爾值，表示是否允許發(fā)送 Cookie 。默認(rèn)情況下， Cookie 不包括在 CORS 請求之中，設(shè)置為 true，即表示服務(wù)器明確許可
???? ??????? response.setHeader("Access-Control-Allow-Credentials", "true");?
???? ??????? chain.doFilter(req, res);?
???? }
???? @Override
???? public void init(FilterConfig arg0) throws ServletException {
?????????? // TODO Auto-generated method stub
}
? Web.xml
<!-- 跨域配置 -->
?? <filter>
??? <filter-name>SimpleCORSFilter</filter-name>
??? <filter-class>com.qst.config.CORSFilter</filter-class>
??? <init-param>
????? <param-name>IsCross</param-name>
????? <param-value>true</param-value>
??? </init-param>
? </filter>
? <filter-mapping>
? <filter-name>SimpleCORSFilter</filter-name>
? <url-pattern>/*</url-pattern>
? </filter-mapping>?
方法三：配置（SpringBoot）
? @Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
??? static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
??? @Override
??? public void addCorsMappings(CorsRegistry registry) {
?registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS)?.maxAge(3600);
??? }
}
?
