? ? ? ? 瀏覽器為了安全考慮，有一個(gè)最基本的安全策略，即同源策略。

? ? ? ? 同源策略規(guī)定：瀏覽器在解析Ajax請(qǐng)求時(shí)，要求瀏覽器的路徑與Ajax的請(qǐng)求的路徑必須滿足三個(gè)要求，即請(qǐng)求的協(xié)議、域名、端口號(hào)都相同，滿足同源策略，可以訪問服務(wù)器，否則，只要有一個(gè)不相同，那么都是非同源。

? ? ? ? 跨域問題的出現(xiàn)是因?yàn)闉g覽器的同源策略問題，所謂同源:就是兩個(gè)頁面具有相同的協(xié)議（protocol），主機(jī)（host）和端口號(hào)（port），它是瀏覽器最核心也是最基本的功能，如果沒有同源策略我們的瀏覽器將會(huì)十分的不安全，隨時(shí)都可能受到攻擊。

當(dāng)我們請(qǐng)求一個(gè)接口的時(shí)候，出現(xiàn)如：Access-Control-Allow-Origin 字眼的時(shí)候說明請(qǐng)求跨域了

?問題一：所有使用JavaScript的瀏覽器都會(huì)支持同源策略。同源策略即指域名/協(xié)議/端口號(hào)相同。只要有一個(gè)不同，就會(huì)當(dāng)作跨域請(qǐng)求

一是可以讓后端接口或配置文件里添加跨域代碼

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");

二是可以前端設(shè)置代理

找到config文件夾下的index.js文件，然后找到dev下的proxyTable{}

 proxy: {
"/test": {
	target: "http://www.baidu.com/",   //這里設(shè)置需要請(qǐng)求的接口地址
	changeOrigin: true
    }
}

然后找到請(qǐng)求頁面，在axios的請(qǐng)求接口里面只寫/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/這個(gè)請(qǐng)求頭，同時(shí)把test去掉

或者是其他版本時(shí): 在項(xiàng)目根目錄下新建vue.config.js文件，在該文件內(nèi)新增配置

module.exports = {
    devServer: {
        proxy: {
            '/test': {
                target: 'https://baidu.com',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/test': ''
                }
            }
        }
    },
}

我這里的配置是這樣的：

?然后地址是配置到了這邊

?這樣打包的時(shí)候就會(huì)把值帶過去

問題二：

重復(fù)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);

在前端訪問后端時(shí)出現(xiàn)了跨域問題，在返回的請(qǐng)求頭中出現(xiàn)了倆次Access-Control-Allow-Origin:"*",導(dǎo)致請(qǐng)求跨域，原因是因?yàn)榕渲昧藘纱慰缬?。一次是在FileUtil中配置了response.addHeader("Access-Control-Allow-Origin", "*")，另外一次是使用CorsFilter又配置了一次，所以才出現(xiàn)了出現(xiàn)有兩個(gè)Access-Control-Allow-Origin問題，所以只需要把其中一個(gè)配置刪除就可以解決了。就是過濾器中或配置文件或者其他設(shè)置中配置了跨域才會(huì)出現(xiàn)的問題。

問題三：后端接收到的類型不一致。

我這邊是傳值的時(shí)間出了問題，后端需要的時(shí)間類型是:2022-12-06 00:00:00，而前端傳值是2022-12-06，所以然后也報(bào)了跨域問題:No 'Access-Control-Allow-Origin' header is present on the requested resource，把前后端需要的屬性的類型都統(tǒng)一就解決了。

?文章來源地址http://www.zghlxwxcb.cn/news/detail-458059.html

到了這里，關(guān)于No ‘Access-Control-Allow-Origin‘ header is present on the requested resource關(guān)于vue跨域問題 重復(fù)Access-Control-Allow-Origin的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！