webpack本地axios接口代理一直不生效

2023-06-03 0 316

两个较为老的工程项目,各式各样实用性也较为坑,以后没配 proxy USB全权,webpack 却是用的 v3 版,工程项目中即使要出访另两个搜索引擎下的USB,因此就来提心吊胆了下全权,但USB全权始终不施行,收起:Failed to load resource: the server responded with a status of 404 (Not Found)。

vue 工程项目的 main 实用性出口处文档

//main.jsimport Vue from vue import App from ./App import router from ./router import axios from axios // import myAjax from @/util/my-axios Vue.prototype.$axios = axios new Vue({ el: #app, router, template: <App/>, components: { App }, })

自订 axios 实用性的 my-axios 文档

// util/my-axios.js import axios from axios import config from @/config import cookies from vue-cookies axios.defaults.baseURL = config.apiBaseURL // 请求截击 axios.interceptors.request.use( config => { config.withCredentials = true config.timeout = 600000 const token = cookies.get(token) config.headers.token = token return config }, error => { return Promise.reject(error) } ) // 响应截击 axios.interceptors.response.use( response => { returnresponse.data || {} },error => { return Promise.reject(error) } )

最后查看USB发现,允诺地址也并不是实用性的全权前缀,后面才发现是即使 main.js 里原本导入了 my-axios 文档,eslint 会提示变量未使用,我手一抖就给删掉了,然后就会发现收起,全权也不施行。

这个问题还有就是 main.js 里导入 axios 的方式也有问题,这里先导入了官方的 axios 库,然后又导入了自订的 my-axios 文档,实际运行是没问题的,但较为好的方式应该是只导入咱自己封装过后的 my-axios 这两个文档,优化后的版:

vue 工程项目的 main 实用性出口处文档,只用导入 my-axios 这两个文档:

// main.js import Vue from vue import App from ./App import router from ./router import axios from @/util/my-axios Vue.prototype.$axios = axios new Vue({ el: #app, router, template: <App/>, components: { App }, })

自订 axios 实用性的 my-axios 文档,比上面原本的最后一行多两个默认导出 export default axios:

// util/my-axios.js import axios from axios import config from @/config import cookies from vue-cookiesaxios.defaults.baseURL = config.apiBaseURL// 允诺截击 axios.interceptors.request.use( config =>{ config.withCredentials =true config.timeout = 600000 const token = cookies.get(token) config.headers.token = tokenreturn config }, error => { return Promise.reject(error) } ) // 响应截击axios.interceptors.response.use(response => { return response.data || {} }, error => { return Promise.reject(error) } ) export default axios

因此要注意前端工程项目 index.html 里的 script 标签直接定义的变量和 main.js 里定义或 import 导入的一些东西即使提示未使用也不能删除,即使这里的是全局变量,说不定那个页面或系统里直接在用。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务