? ? ? ? 瀏覽器為了安全考慮，有一個最基本的安全策略，即同源策略。
? ? ? ? 同源策略規(guī)定：瀏覽器在解析Ajax請求時，要求瀏覽器的路徑與Ajax的請求的路徑必須滿足三個要求，即請求的協(xié)議、域名、端口號都相同，滿足同源策略，可以訪問服務器，否則，只要有一個不相同，那么都是非同源。
? ? ? ? 跨域問題的出現(xiàn)是因為瀏覽器的同源策略問題，所謂同源:就是兩個頁面具有相同的協(xié)議（protocol），主機（host）和端口號（port），它是瀏覽器最核心也是最基本的功能，如果沒有同源策略我們的瀏覽器將會十分的不安全，隨時都可能受到攻擊。
當我們請求一個接口的時候，出現(xiàn)如：Access-Control-Allow-Origin 字眼的時候說明請求跨域了
?問題一：所有使用JavaScript的瀏覽器都會支持同源策略。同源策略即指域名/協(xié)議/端口號相同。只要有一個不同，就會當作跨域請求
一是可以讓后端接口或配置文件里添加跨域代碼
header('Access-Control-Allow-Origin:*');//允許所有來源訪問
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式
//或者過濾器中添加
httpResponse.setHeader("Access-Control-Allow-Origin","*");
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
httpResponse.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");二是可以前端設置代理
找到config文件夾下的index.js文件，然后找到dev下的proxyTable{}
proxy: {
"/test": {
target: "http://www.baidu.com/", //這里設置需要請求的接口地址
changeOrigin: true
}
}
然后找到請求頁面，在axios的請求接口里面只寫/test/getlist就行了。/test/跟上接口地址
或者是另一種配置：?同樣是更改config/index.js的配置文件
module.exports = {
dev: {
proxyTable: {
'/test/: {
target: 'http://www.baidu.com/',
changeOrigin: true,
pathRewrire: {
'^/test': ''
}
}
}
}
遇到接口路徑有test的，就換成http://www.baidu.com/這個請求頭，同時把test去掉
或者是其他版本時: 在項目根目錄下新建vue.config.js文件，在該文件內新增配置
module.exports = {
devServer: {
proxy: {
'/test': {
target: 'https://baidu.com',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/test': ''
}
}
}
},
}
我這里的配置是這樣的：
?然后地址是配置到了這邊
?這樣打包的時候就會把值帶過去
問題二：
重復Access-Control-Allow-Origin
HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
//*表示允許所有域名跨域
httpResponse.setHeader("Access-Control-Allow-Origin","*");
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
httpResponse.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
httpResponse.setHeader("Access-Control-Max-Age", "5000");
httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,Authorization,Token");
filterChain.doFilter(servletRequest, servletResponse);在前端訪問后端時出現(xiàn)了跨域問題，在返回的請求頭中出現(xiàn)了倆次Access-Control-Allow-Origin:"*",導致請求跨域，原因是因為配置了兩次跨域。一次是在FileUtil中配置了response.addHeader("Access-Control-Allow-Origin", "*")，另外一次是使用CorsFilter又配置了一次，所以才出現(xiàn)了出現(xiàn)有兩個Access-Control-Allow-Origin問題，所以只需要把其中一個配置刪除就可以解決了。就是過濾器中或配置文件或者其他設置中配置了跨域才會出現(xiàn)的問題。
問題三：后端接收到的類型不一致。
我這邊是傳值的時間出了問題，后端需要的時間類型是:2022-12-06 00:00:00，而前端傳值是2022-12-06，所以然后也報了跨域問題:No 'Access-Control-Allow-Origin' header is present on the requested resource，把前后端需要的屬性的類型都統(tǒng)一就解決了。
文章來源：http://www.zghlxwxcb.cn/news/detail-719395.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-719395.html
到了這里，關于No ‘Access-Control-Allow-Origin‘ header is present on the requested resource關于vue跨域問題的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
