Vue项目中解决axios请求跨域问题(第三方接口)

先引入axios

在命令行输入 npm i axios 

然后再引入 import axios from 'axios' 这里不再赘述

首先明确自己的api接口,比如我的是  

http://testapi.tvm.com.cn/some/getsome

先去config/index.js中找到proxyTable

//如果你用vue-cli初始化一个项目,一般proxyTable中是空的

proxyTable:{}

//在里面填入:

proxyTable:{
    '/api': {
          target: 'http://testapi.tvm.com.cn',//设置你调用的接口域名和端口号 别忘了加http
          changeOrigin: true,
          pathRewrite: {
            '^/api': '',
           //这里理解成用'/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://xxx.xxx.xxx.xx:8081/user/add',直接写‘/api/user/add’即可
          }
        }
}

上面pathRewrite中的注释不清楚,我再写一遍:

'/api'来代替target中的地址,以后再调用接口,比如http://testapi.tvm.com.cn/some/getsome

那么就直接写 '/api/some/getsome'

设置好之后,我们到一个组件中使用,上面已经引入了axios

let url='/api/some/getsome'
axios.get(url)
    .then(res=>{
        console.log(res)
    })
    .catch(err=>{
        console.log(err)
    })

这里多嘴一下,请求方式很多,有get/post/delete/put等等,需要添加参数,可以这么写

let url=''
let element='某些请求参数'
axios.get(url,element)
    .then
    .catch

~~~完事~~~

  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue项目使用axios发起请求存在以下几种解决方案: 1. 通过设置proxyTable代理解决 在`config/index.js`可以找到`dev`下的`proxyTable`属性,可以设置代理规则,如下所示: ``` module.exports = { dev: { // ... proxyTable: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '/mock' // 将/api替换为/mock } } } } } ``` 上面的代码,代理规则的`/api`表示需要代理的请求路径,`target`表示代理目标地址,`changeOrigin`表示是否改变请求的origin字段,`pathRewrite`表示路径重写规则。 2. 在服务器端设置CORS(资源共享)策略 在服务器端设置CORS策略,允许指定的名或IP地址访问API。具体的设置方法可以参考服务器框架的文档,比如,如果是使用Express框架,可以通过以下代码启用CORS: ``` const express = require('express') const app = express() app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', 'http://localhost:8080') // 允许访问的名或IP地址 res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS') // 允许的请求方法 res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization') // 允许的请求头 res.header('Access-Control-Allow-Credentials', 'true') // 是否允许发送Cookie next() }) // 其他路由和间件 ``` 3. 使用JSONP解决 JSONP是一种请求方式,只支持GET请求,但是需要服务器端支持。在Vue可以使用vue-jsonp插件来实现JSONP请求,具体使用方法可以参考插件文档。 以上三种方法都可以解决Vue项目使用axios发起请求问题,选择哪种方法取决于具体的应用场景和服务器端环境。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值