Access to XMLHttpRequest at 'http://localhost/api/admin/authorizations' from origin 'http://localhost:9528' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
Access-Control-Allow-Credentials 這個(gè)頭的作用，果然藥到病除。這個(gè)是服務(wù)端下發(fā)到客戶端的 response 中頭部字段，意義是允許客戶端攜帶驗(yàn)證信息，例如 cookie 之類的。這樣客戶端在發(fā)起跨域請(qǐng)求的時(shí)候，不就可以攜帶允許的頭，還可以攜帶驗(yàn)證信息的頭，又由于客戶端是請(qǐng)求框架是 axios，并且手殘的設(shè)置了 withCredentials: true，意思是客戶端想要攜帶驗(yàn)證信息頭，但是我的服務(wù)端設(shè)置是 ‘supportsCredentials’ => false, ，表示不允許攜帶信息頭。
WebMvcConfigurer配置跨域用法介紹
https://blog.csdn.net/munangs/article/details/132223699
@CrossOrigin(originPatterns = “*”,allowCredentials = “true”)
package xunan.management.boot.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CrossConfig implements WebMvcConfigurer{
// @Override
// public void addCorsMappings(CorsRegistry registry) {
// registry.addMapping("/**")
// .allowedHeaders("*")
// .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
// .allowCredentials(true)
// .maxAge(3600);
// }
/**
* .addMapping("/**")// 允許跨域訪問的路徑
* .allowedOrigins("*")// 允許跨域訪問的源
* .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")// 允許請(qǐng)求方法
* .maxAge(168000)// 預(yù)檢間隔時(shí)間
* .allowedHeaders("*")// 允許頭部設(shè)置
* .allowCredentials(true); // 是否發(fā)送cookie
*/
//以上這段代碼等于@CrossOrigin(allowCredentials = "true")
}
如果用原生的AJAX是加載本地文件就不會(huì)出現(xiàn)錯(cuò)誤。當(dāng)然，這個(gè)jquery的load放在服務(wù)器上通過http加載還是支持的。也有例外比如在firefox和ie瀏覽器使用$.ajax加載本地html或txt文件時(shí),不會(huì)報(bào)錯(cuò)。
當(dāng)其他瀏覽器控制臺(tái)彈出下面報(bào)錯(cuò)，表明這個(gè)不支持跨域?yàn)g覽本地文件：
Access to XMLHttpRequest at ‘file:///F:/%E4%BB%A3%E7%A0%81/Jquery/a.txt’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
其實(shí) ，禁止跨域是瀏覽器的安全限制機(jī)制，在每個(gè)瀏覽器下都有，如在chrome、Firefox、opera 、360 都是這樣的，同樣會(huì)報(bào)告上述錯(cuò)誤，但是可以通過設(shè)置來繞過這個(gè)限制（如果經(jīng)常 完前端代碼 建議在本機(jī)裝個(gè)web容器。。。），常見的方式是 右擊chrome快捷方式，選擇“屬性”，在“快捷方式”下的“目標(biāo)”中添加" --allow-file-access-from-files"(最前面有個(gè)空格)，重啟chrome即可如下:
“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –allow-file-access-from-files //注意有空格，關(guān)閉瀏覽器然后重啟瀏覽器即可支持文章來源：http://www.zghlxwxcb.cn/news/detail-643241.html
Jquery的load()一般是加載服務(wù)器上的文件(非本地文件)，這個(gè)概念需要弄清楚。要發(fā)布網(wǎng)站后通過http協(xié)議進(jìn)行訪問，本地file協(xié)議瀏覽會(huì)產(chǎn)生跨域問題。
除非是靜態(tài)文件html調(diào)用load，但是這個(gè)也是有的瀏覽器支持，有的不支持。
加載js文件時(shí)使用了file協(xié)議，該協(xié)議會(huì)導(dǎo)致跨域，而使用htpp、https等協(xié)議時(shí)則沒有跨域問題。而使用file協(xié)議則是因?yàn)樵跒g覽器中查看html文件時(shí)沒有起服務(wù)！平時(shí)使用webstorm時(shí)會(huì)自動(dòng)起服務(wù)，所以沒有注意到這個(gè)問題。文章來源地址http://www.zghlxwxcb.cn/news/detail-643241.html
到了這里，關(guān)于本地HTML訪問后端獲取數(shù)據(jù)使用@CrossOrigin仍出現(xiàn)跨域問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
