快捷導(dǎo)航

vue中解決跨域的常見(jiàn)方案分享(建議收藏)

更新時(shí)間：2025年11月12日 09:59:56 作者：小二愛(ài)編程·

本文主要介紹了前后端分離項(xiàng)目中的跨域問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、開(kāi)發(fā)環(huán)境解決跨域方法

平時(shí)使用vue開(kāi)發(fā)的時(shí)候，大多會(huì)使用vue-cli搭建項(xiàng)目，在vue-cli搭建的項(xiàng)目中有一個(gè)配置文件vue.config.js,可以在該文件中進(jìn)行相應(yīng)的配置解決開(kāi)發(fā)環(huán)境的跨域問(wèn)題。

第一步設(shè)置公共url : api/index.js

import axios from 'axios'
import router from '@/router/index.js'
import store from '@/store/index.js'
// 創(chuàng)建一個(gè)axios實(shí)例
var instance = axios.create({ 

baseURL: "/api",
})
// 請(qǐng)求攔截器
instance.interceptors.request.use(function (config) { 

config.headers['E_Token'] = store.state.user.E_Token;
return config;
}, function (error) { 

// 對(duì)請(qǐng)求錯(cuò)誤做些什么
return Promise.reject(error);
})
// 響應(yīng)攔截
instance.interceptors.response.use(function (config) { 

if(config.data.retCode !=0){ 

// 處理后臺(tái)異常
return false;
}
return config;
}, function (error) { 

return Promise.reject(error)
})
export default function (method, url, data = null) { 

method = method.toLowerCase();
if (method == 'post') { 

return instance.post(url, data)
} else if (method == 'get') { 

return instance.get(url, data)
} else if (method == 'delete') { 

return instance.delete(url, data)
} else if (method == 'put') { 

return instance.put(url, data)
} else { 

console.error('未知的method' + method)
return false
}
}

api/modules/pagesApi.js

import req from '../index'
//用戶(hù)注冊(cè)接口
export const register =(params)=>{ 

return req("post", '/user/register', params)
}
//用戶(hù)登錄接口
export const login =(params)=>{ 

return req("post", '/user/login', params)
}
//Model列表及分頁(yè)
export const getFormList =(params)=>{ 

return req("post", '/model/getFormList', params)
}
//查看詳情
export const queryModel =(params)=>{ 

return req("get", '/model/queryModel/'+params.id,{ 
})
}
//Model刪除接口
export const deleteModel =(params)=>{ 

return req("delete", '/model/deleteModel/'+params.id,{ 
})
}
//Model新增
export const insertModel =(params)=>{ 

return req("post", '/model/insertModel', params)
}

通過(guò)攔截器我們可以更加容易的與后臺(tái)進(jìn)行交互，同時(shí)簡(jiǎn)潔了代碼，使得管理更加容易，我們創(chuàng)建攔截器的時(shí)候可以指定baseUrl，這里我指定的是**”/api”,因?yàn)榻酉聛?lái)我們需要對(duì)“/api”進(jìn)行攔截配置，目的是凡是以“/api”開(kāi)頭的請(qǐng)求url都會(huì)將url中的“/api”**的前面添加上我們指定的內(nèi)容。例如：

'/api/user/login' 替換成 'http://119.20.224.137:8201/api/user/login'

vue.config.js

devServer: {
// 1.指定服務(wù)的ip
host: "192.168.0.128",
// 2.指定服務(wù)的端口
port: 3000,
open: true,
overlay: {
warnings: false,
errors: true
},
// 3.開(kāi)發(fā)環(huán)境進(jìn)行http的代理
proxy: {
// 匹配 url 路徑的開(kāi)頭
'/api': {
// 1.路勁只要是/api開(kāi)頭的url都代理到下面這個(gè)網(wǎng)站。
// 例如：'/api/xxxx' 會(huì)代理到 https://119.20.224.137/api/xxxx
target: 'http://119.20.224.137:8201',
changeOrigin: true,
pathRewrite: { '^/api': '/api/' }
}
}
},

二、生產(chǎn)環(huán)境解決跨域方法

配置nginx代理

使用nginx反向代理，在配置文件nginx.conf中找到server{}對(duì)象，更改項(xiàng)目地址root和配置代理地址proxy_pass，這個(gè)方法適合前端靜態(tài)文件使用：

location / { 

root   D:/browseClient/dist;  #自己的前端項(xiàng)目地址
index  index.html index.htm;
}
#解決跨域
location /api { 
                                # 自定義nginx接口前綴
proxy_pass   http://127.0.0.1:3000;            # 后臺(tái)api接口地址
proxy_redirect default;      
#設(shè)置主機(jī)頭和客戶(hù)端真實(shí)地址，以便服務(wù)器獲取客戶(hù)端真實(shí)IP
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   
}

三、后端處理

 response.setHeader("Access-Control-Allow-Origin", "*");//* or origin as u prefer
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "PUT, POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "content-type, authorization");

到此這篇關(guān)于vue中解決跨域的常見(jiàn)方案分享(建議收藏)的文章就介紹到這了,更多相關(guān)vue跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: