一、問(wèn)題描述
我們?cè)谕瓿汕昂蠖朔蛛x項(xiàng)目時(shí)（Vue+SpringBoot），有很多人會(huì)遇到跨域問(wèn)題（CORS）。
跨域問(wèn)題： 指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對(duì)javascript施加的安全限制。
同源策略： 是指協(xié)議，域名，端口都要相同，其中有一個(gè)不同都會(huì)產(chǎn)生跨域問(wèn)題（瀏覽器產(chǎn)生）。
所謂同源是指，域名，協(xié)議，端口 均相同，例如：
- http://www.8080.com/index.html調(diào)用 http://www.8080.com/server.PHP
（非跨域）； - http://www.8080.com/index.html調(diào)用 http://www.8181.com/server.php
（主域名不同:8080/8181，跨域） - http://a.8080.com/index.html調(diào)用http://b.8080.com/server.php（子域名不同:a/b，跨域）；
- http://www.6.com:8080/in.html調(diào)用http://www.6.com:8081/se.php（端口不同:8080/8081，跨域）
- http://www.80.com/index.html調(diào)用https://www.80.com/server.php（協(xié)議不同:http/https，跨域）
請(qǐng)注意： localhost和127.0.0.1雖然都指向本機(jī)，但也屬于跨域。
瀏覽器執(zhí)行javascript腳本時(shí)，會(huì)檢查這個(gè)腳本屬于哪個(gè)頁(yè)面，如果不是同源頁(yè)面，就不會(huì)被執(zhí)行。
二、如何解決
1.添加@CrossOrigin注解
在目標(biāo)方法上添加@CrossOrigin注解，適用于方法少。
@CrossOrigin注解中有2個(gè)參數(shù)填寫項(xiàng)，分別是：
- origins ： 允許可訪問(wèn)的域列表
- maxAge：準(zhǔn)備響應(yīng)前的緩存持續(xù)的最大時(shí)間（以秒為單位）
spring注解@CrossOrigin不起作用的原因：
- 是springMVC的版本要在4.2或以上版本才支持@CrossOrigin
- 在Controller注解上方添加@CrossOrigin注解后，仍然出現(xiàn)跨域問(wèn)題，解決方案之一就是：在@RequestMapping注解中沒(méi)有指定Get、Post方式，具體指定后，問(wèn)題解決。
2.添加CorsConfiguration過(guò)濾器
當(dāng)我們項(xiàng)目中有很多方法時(shí)，一個(gè)個(gè)添加注解就不適用了。
這時(shí)，我們要添加一個(gè)過(guò)濾器：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-771561.html
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter(){
//創(chuàng)建過(guò)濾器對(duì)象（springframework提供）
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); //允許不同源
corsConfiguration.addAlLowedHeader("*"); //允許不同的http/https
corsConfiguration.addAlLowedMethod("*"); //允許不同的請(qǐng)求頭put,post...
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(source.registerCorsConfiguration( pattern:"/**"，corsConfiguration);
return new CorsFilter(source);
}
}
3.實(shí)現(xiàn)WebMvcConfigurer接口，重寫addCorsMappings方法
@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
@override
public void addCorsMappings(CorsRegistry registry){
registry.addMapping("/**")
.allowedoriginPatterns("*")
//允許不同的請(qǐng)求頭
.allowedMethods("GET", "posT", "PuT","DELETE","HEAD","OPTIONS")
.a1lowCredentials(true)
.maxAge(3600) //3600s內(nèi)不再詢問(wèn)
.alTowedHeaders("*");
}
}
希望這些可以幫到你，也可以幫到我，防止我忘記哈哈！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-771561.html
到了這里，關(guān)于解決跨域報(bào)錯(cuò)問(wèn)題&Access to XMLHttpRequest at ‘xxx‘ from origin ‘xxx‘ has been blocked by CORs policy.header的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
