快捷導(dǎo)航

如何解決Vue請(qǐng)求接口出現(xiàn)跨域問題Access-Control-Allow-Origin

更新時(shí)間：2023年10月24日 09:56:47 作者：ShiyuTim

這篇文章主要介紹了如何解決Vue請(qǐng)求接口出現(xiàn)跨域問題Access-Control-Allow-Origin,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue請(qǐng)求接口出現(xiàn)跨域問題

在使用axios請(qǐng)求了接口后，發(fā)現(xiàn)并沒有請(qǐng)求到，F(xiàn)12里面出現(xiàn)如下圖所示的報(bào)錯(cuò)

這是提示跨域了。

所有使用JavaScript的瀏覽器都會(huì)支持同源策略。

同源策略即指域名/協(xié)議/端口號(hào)相同。

只要有一個(gè)不同，就會(huì)當(dāng)作跨域請(qǐng)求。

解決方法

一種是讓后端接口里添加如下兩句代碼：

header('Access-Control-Allow-Origin:*');//允許所有來源訪問

header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式

當(dāng)然求人不如求己，自己在項(xiàng)目里面設(shè)置代理

如果使用vue-cli腳手架創(chuàng)建的項(xiàng)目,找到config文件夾下的index.js文件。
找到dev下的proxyTable {}

舉個(gè)例子：

如果請(qǐng)求接口為http://www.baidu.com/user/info/list,請(qǐng)求頭為http://www.baidu.com/，那么就添加

"/user": {
	target: "http://www.baidu.com/",
	changeOrigin: true,
}

然后找到請(qǐng)求頁(yè)面，在axios的請(qǐng)求接口里面只寫/user/info/list就行了。

更新：另外一種配置方法：

同樣是更改config/index.js的配置文件：

module.exports = {
  dev: {
  	proxyTable: {
		'/api/: {
			target: 'http://www.baidu.com/',
			changeOrigin: true,
			pathRewrire: {
				'^/api': ''
			}
		}
	}
  }

上面的配置表示，遇到接口路徑有api的，就換成http://www.baidu.com/這個(gè)請(qǐng)求頭，同時(shí)把api去掉。

因?yàn)榭缬騿栴}一般只存在開發(fā)環(huán)境，所以我們可以把axios進(jìn)行如下配置：

if(process.env.NODE_ENV === 'production') {
	axios.defaults.baseURL = '/'
} else {
	axios.defaults.baseURL = '/api/'
}

這樣，我們?cè)?strong>開發(fā)環(huán)境下，就可以通過增加api這個(gè)來配置跨域。

在Vue-cli3.0以上版本時(shí)

在項(xiàng)目根目錄下新建vue.config.js文件，在該文件內(nèi)新增如下配置：

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

剩下的axios配置跟上面一樣，更多關(guān)于vue.config.js的配置文件請(qǐng)參考官方文檔吧

ok，就設(shè)置完成了，當(dāng)然最后一步千萬不要忘了：

關(guān)掉頁(yè)面，從新npm run dev一下，要不即使設(shè)置代理完成也會(huì)請(qǐng)求不到，一定要注意