vue.config.js headers 设置
时间: 2023-10-28 19:21:21 浏览: 106
在 Vue 项目中,可以通过配置 `vue.config.js` 文件来设置请求的 headers。具体步骤如下:
1. 在项目根目录下创建一个名为 `vue.config.js` 的文件(如果已存在,则直接编辑)。
2. 在这个文件中,使用 `devServer` 字段来配置开发服务器。示例代码如下:
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com', // 将请求代理到目标服务器
changeOrigin: true, // 支持跨域
headers: {
// 设置请求的 headers
'X-Custom-Header': 'Custom Value'
}
}
}
}
};
```
在上述例子中,将所有以 `/api` 开头的请求代理到 `http://api.example.com` 目标服务器,并且设置了一个自定义的请求头 `'X-Custom-Header'`。
3. 保存 `vue.config.js` 文件,并重新启动开发服务器。
现在,所有通过代理发送到 `/api` 的请求都会带上自定义的请求头。
请注意,这个配置只适用于开发服务器,如果你需要在生产环境中设置请求的 headers,你可能需要根据具体的部署方式进行相应的配置。
相关问题
配置vue.config.js中的proxy
根据提供的引用内容,可以配置vue.config.js中的proxy如下:
```javascript
devServer: {
proxy: {
'^/api/': {
target: 'http://localhost:8060',
changeOrigin: true
},
"/apis": {
target: 'https://example.com',
changeOrigin: true,
secure: false,
headers: {
Referer: 'https://example.com'
}
},
'/chc-shop': {
target: 'https://www.zhbbroker.cn',
changeOrigin: true,
secure: false,
logLevel: 'debug'
},
'^/v1': {
target: 'https://monitor-api.xxx',
changeOrigin: true
},
'^/(d|api|login|public)/': {
target: 'https://monitor-third-pard-api.xxx',
ws: true,
changeOrigin: true
}
}
}
```
以上配置中,`^/api/`和`/apis`路径会被代理到`http://localhost:8060`和`https://example.com`,而`/chc-shop`路径会被代理到`https://www.zhbbroker.cn`。另外,`^/v1`路径会被代理到`https://monitor-api.xxx`,而`^/(d|api|login|public)/`路径会被代理到`https://monitor-third-pard-api.xxx`。请注意,配置代理后需要重启项目才能生效。
vue使用config.js配置全局axios路由
要在Vue项目中全局配置axios和路由,可以按照以下步骤进行:
1. 安装axios和vue-router
```
npm install axios vue-router --save
```
2. 在src目录下创建一个config.js文件,用于存放全局配置
```javascript
import axios from 'axios'
import router from '../router'
// axios配置
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.timeout = 5000
// 请求拦截器
axios.interceptors.request.use(
config => {
// 如果有token则添加到请求头中
if (localStorage.token) {
config.headers.Authorization = localStorage.token
}
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器
axios.interceptors.response.use(
response => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
return Promise.resolve(response)
} else {
return Promise.reject(response)
}
},
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: { redirect: router.currentRoute.fullPath }
})
break
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
alert('登录过期,请重新登录')
// 清除token
localStorage.removeItem('token')
// store.commit('loginSuccess', null)
setTimeout(() => {
router.replace({
path: '/login',
query: { redirect: router.currentRoute.fullPath }
})
}, 1000)
break
// 404请求不存在
case 404:
alert('网络请求不存在')
break
// 其他错误,直接抛出错误提示
default:
alert(error.response.data.message)
}
return Promise.reject(error.response)
}
}
)
export default axios
```
3. 在main.js中引入config.js文件,并将axios和router挂载到Vue.prototype上
```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from './config'
Vue.config.productionTip = false
Vue.prototype.$axios = axios
Vue.prototype.$router = router
new Vue({
router,
render: h => h(App),
}).$mount('#app')
```
现在可以在Vue项目的任何地方使用axios和router了。