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

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

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

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

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

這是提示跨域了。

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

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

只要有一個不同，就會當作跨域請求。

解決方法

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

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

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

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

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

舉個例子：

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

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

然后找到請求頁面，在axios的請求接口里面只寫/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/這個請求頭，同時把api去掉。

因為跨域問題一般只存在開發(fā)環(huán)境，所以我們可以把axios進行如下配置：

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

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

在Vue-cli3.0以上版本時

在項目根目錄下新建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的配置文件請參考官方文檔吧

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

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