vue 跨域请求(fetch/axios/proxytable)

解决跨域问题
本文介绍了一种通过配置代理表和使用axios库来解决前端开发中常见的跨域问题的方法。
#### 跨域接口地址: http://www/thenewstep.cn/test/testToken.php
#### 参数: username,password
#### token: f4c902c9ae5a2a9d8f84868ad064e706
#### 请求类型: post
#### 请求头:  Content-type:application/json

在app.vue中写个钩子函数

created() {

    // fetch

     fetch("http://www/thenewstep.cn/test/testToken.php",{

         method:"post",

         body:"hello"

    })

    .then(result => {

         console.log(result)

     })

}

以上代码会报跨域的问题

解决方案

在config下的index.js中的proxyTable中赋值

proxyTable:{

    '/apis':{

         target:'http://www/thenewstep.cn',// 接口域名

         changeOrigin: true, // 是否跨域

         pathRewrite: {

             '^/apis': ' '  // 需要rewrite重写的

         }

    }

}

替换钩子函数中的路径,然后重启

created() {

    // fetch

     fetch("/aips/test/testToken.php",{

         method:"post",

         headers:{

            "Content-type":"application/json",

            token:"f4c902c9ae5a2a9d8f84868ad064e706"

         },

         body:JSON.stringify({username:"henry",password:"123456"})

    })

    .then(result => {

       return result.json()

     })

     .then(data => {

         console.log(data)

     })

}

 

 

使用axios

1.安装axios模块

npm install axios

2.重启

npm run dev

3.在main.js中引入axios

import axios from 'axios'

4.为了全局使用添加到vue的原型上

Vue.prototype.$axios = axios

5.在App.vue中使用

// axios

this.$axios.post("/apis/test/testToken.php",{username:"hello",password:"123"})

     .then(data => {

          console.log(data)

      })

6.在main.js中设置token,post请求头等

axios.defaults.headers.common['token'] = "f4c902c9ae5a2a9d8f84868ad064e706"

axios.defaults.headers.post["Content-type"] ="application/json"

 

<think>我们参考多个引用资料,针对Vue3(因为引用中提到了Vue3与Vue2的区别)封装axios并全局使用的方法进行说明。引用[1]和[2]提到了在Vue3中全局挂载axios的方法,引用[3][4][5]则提供了封装和使用的示例。步骤:1.创建axios实例并封装(通常放在utils或src目录下的http.js文件中)2.在封装的实例中设置拦截器(请求拦截和响应拦截,引用[4]提到了请求拦截器)3.在main.js(或类似入口文件)中将封装后的axios挂载到全局属性4.在组件中使用全局挂载的axios发起请求下面详细说明:###1.封装axios实例我们创建一个http.js文件(如src/utils/http.js)来封装axios。```javascriptimportaxiosfrom'axios';//创建axios实例constservice=axios.create({baseURL:process.env.VUE_APP_BASE_API,//从环境变量获取基础URLtimeout:5000//请求超时时间});//请求拦截器service.interceptors.request.use(config=>{//在发送请求之前可以做一些处理,比如添加token//如果用户有token,则携带在请求头中//consttoken=getToken();//if(token){//config.headers['Authorization']=`Bearer${token}`;//}returnconfig;},error=>{//对请求错误做些什么returnPromise.reject(error);});//响应拦截器service.interceptors.response.use(response=>{//对响应数据做处理,例如根据状态码进行判断constres=response.data;//假设我们有一个状态码字段为code,0表示成功if(res.code===0){returnres;}else{//处理业务错误returnPromise.reject(newError(res.message||'Error'));}},error=>{//对响应错误做处理returnPromise.reject(error);});exportdefaultservice;```###2.全局挂载在main.js中,我们导入封装好的axios实例,并挂载到Vue全局属性上(Vue3使用app.config.globalProperties)。```javascriptimport{createApp}from'vue';importAppfrom'./App.vue';importaxiosfrom'./utils/http';//导入封装的axios实例constapp=createApp(App);//Vue3挂载全局属性:使用app.config.globalPropertiesapp.config.globalProperties.$http=axios;app.mount('#app');```###3.在组件中使用在组件中,我们可以通过this.$http来使用封装好的axios实例。```vue<template><div><button@click="getData">获取数据</button></div></template><script>exportdefault{methods:{getData(){this.$http.get('/user').then(response=>{console.log(response);}).catch(error=>{console.error(error);});}}};</script>```###4.可选:统一管理API(引用[3]和[5]的方法)我们可以创建api目录,统一管理接口请求函数。例如,创建src/api/user.js:```javascriptimporthttpfrom'@/utils/http';//导入封装的axios实例exportfunctiongetUserInfo(){returnhttp.get('/user');}exportfunctionpostUserInfo(data){returnhttp.post('/user',data);}```然后在组件中引入使用:```javascriptimport{getUserInfo}from'@/api/user';exportdefault{methods:{asyncfetchData(){try{constres=awaitgetUserInfo();console.log(res);}catch(error){console.error(error);}}}};```###注意事项-Vue3中不再有Vue.prototype,而是使用app.config.globalProperties。-在组合式API(setup)中,无法直接使用this,可以通过getCurrentInstance来获取全局属性。但是更推荐使用模块化的方式(即单独引入封装的axios实例)来发起请求,以避免对Vue实例的依赖。-在拦截器中,可以根据项目需要添加自定义逻辑(如处理token、统一错误处理等)。###问题总结封装axios并全局使用主要分为三个步骤:1.封装axios实例(包括拦截器设置);2.在入口文件将实例挂载到全局;3.在组件中通过全局属性使用或通过模块导入使用(推荐统一管理接口,按模块导入使用)。这样封装后,可以在整个项目中方便地调用axios,并且有利于后期维护。§§相关问题§§1.在Vue3的setup语法中如何调用全局挂载的axios?2.axios拦截器的具体应用场景有哪些?3.如何为axios封装处理不同类型的错误(如网络错误、超时错误、业务错误等)?4.如何配置axios以支持请求?</think> 在Vue项目中封装和全局使用axios的步骤如下,结合Vue3语法(参考引用[1][2])并包含完整示例: ### 1. 创建axios实例封装文件(`src/utils/http.js`) ```javascript import axios from 'axios'; // 创建axios实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 环境变量配置 timeout: 10000 // 超时时间 }); // 请求拦截器(添加token等) service.interceptors.request.use(config => { // 示例:注入token(引用[4]) config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`; return config; }, error => { return Promise.reject(error); }); // 响应拦截器(统一错误处理) service.interceptors.response.use( response => response.data, // 直接返回有效数据 error => { // 统一错误处理(如状态码401跳转登录) if (error.response?.status === 401) { router.push('/login'); } return Promise.reject(error); } ); export default service; ``` ### 2. 在main.js全局挂载(Vue3语法) ```javascript import { createApp } from 'vue'; import App from './App.vue'; import http from './utils/http'; // 引用封装文件 const app = createApp(App); // 全局挂载(引用[1][2]) app.config.globalProperties.$http = http; app.mount('#app'); ``` ### 3. 创建API模块统一管理接口(`src/api/user.js`) ```javascript import http from '@/utils/http'; // 导入封装的axios实例(引用[3]) export const loginAPI = (data) => { return http.post('/api/login', data); }; export const getUserInfo = (params) => { return http.get('/api/user', { params }); }; ``` ### 4. 组件中使用示例 ```vue <script> import { defineComponent } from 'vue'; import { loginAPI } from '@/api/user'; // 模块化引入 export default defineComponent({ setup() { // 方法1:直接调用模块接口(推荐) const handleLogin = async () => { const res = await loginAPI({user: 'admin', pwd: '123'}); console.log(res); }; return { handleLogin }; }, methods: { // 方法2:通过全局属性调用(引用[5]) fetchData() { this.$http.get('/api/data') .then(res => console.log(res)) .catch(err => console.error(err)); } } }); </script> ``` ### 关键封装点说明: 1. **拦截器封装** - 请求拦截器:自动添加认证头信息(引用[4]) - 响应拦截器:统一错误处理和数据结构过滤 2. **API分层管理** - 接口按模块划分(user.js, product.js等) - 避免在组件中直接写URL(引用[3][5]) 3. **两种调用方式** - **推荐**:按需引入接口模块(支持Tree Shaking) - 备用:通过`this.$http`全局调用(简单场景) 4. **环境配置** - 通过`.env`文件管理不同环境的`baseURL` - 开发环境:`.env.development` ```bash VUE_APP_BASE_API = '/dev-api' ``` > 提示:Vue2的`Vue.prototype.$axios = http`写法在Vue3中已改为`app.config.globalProperties.$http`(引用[1])
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值