vue2利用axios调用后端接口,并配置devServer.proxy实现跨域显示数据;代理后出现404问题

一、利用axios调用后端接口,并配置devServer.proxy实现跨域显示数据

前提条件:

1、axios已安装(npm install axios);

2、网上找一个公开的api(以下api我用的项目里的 api:http://elm.cangdu.org/statis/api/all);

3、vue版本vue@2.7.13(npm list vue);

4、项目不在运行的情况下

步骤:

主要关联src/api/request.js、vue.config.js、随便一个.vue页面这三个文件

1、在src下创建api文件夹,创建request.js文件

添加代码

/* eslint-disable*/
import axios from 'axios'

axios.defaults.timeout = 5000 // 超时时间设置
axios.defaults.withCredentials = true // 是否跨域
axios.defaults.baseURL = '/url' // 域名或ip 【注意/url和后面的vue.config.js的/url相匹配】

// Content-Type 响应头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";

// 先简单弄下小例子  /statis/api/all 获取所有api请求信息
export const getAllData = params => {
  return axios.get(`/statis/api/all`, { params: params })
}

 2、找到根目录里的vue.config.js,配置代理服务器,添加代码

  devServer: {
    proxy: {
      '/url': { // /url 表示拦截以/url开头的请求路径 【与request.js的url字段要一致】
        target: 'http://elm.cangdu.org', // http://域名或ip
        changeOrigin: true, // 是否开启跨域
        pathRewrite: { // 重写路径
          '^/url': '' // 把/url变成空字串
        }
      }
    }
  }

 3、在其中一个.vue页面,添加点击事件

<template>
  <div class="home">
    <button @click="getAllData">调用</button>
  </div>
</template>

<script>
/* eslint-disable*/
import { getAllData } from '@/api/request'

export default {
  name: 'HomeView',
  methods: {
    getAllData () {
      getAllData().then((res) => {
        console.log(res)
      })
    }
  },
  
}
</script>

 4、npm run serve 运行,点击按钮,看下有没有问题

取到数据了,实现跨域了

二、proxy代理后出现404问题

问题现象:

问题原因:主要原因是改了 devServer.proxy里的target的值,没有关闭重新运行

解决方案:所以一定要注意,如果在做跨域操作之前项目是在运行中的话,一定做完操作后在命令窗口ctrl+c关闭项目,再重新运行npm run serve

 三、参考

7,vue利用axios调用后台api接口

vue2 axios请求代理跨域 自用无废话

vue.config.js配置proxy代理解决跨越;proxy代理报404;

  • 1
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue中使用axios调用多个接口跨域问题可以通过设置代理来解决。 1. 首先,在Vue项目根目录下找到config文件夹中的index.js文件。 2. 打开index.js文件,找到dev对象中的proxyTable选项。该选项允许我们配置代理。 3. 在proxyTable选项中添加以下代码: ```javascript proxyTable: { '/api1': { target: 'http://localhost:8000', changeOrigin: true, pathRewrite: { '^/api1': '/api1' } }, '/api2': { target: 'http://localhost:8001', changeOrigin: true, pathRewrite: { '^/api2': '/api2' } } } ``` 此处使用了两个接口作为示例,一个是/api1,另一个是/api2。target参数指定了代理的目标地址,需要根据实际情况进行修改。changeOrigin参数用于配置是否跨域,默认为false,需要设置为true。pathRewrite参数用于重写请求路径,可以根据需要进行修改。 4. 保存并关闭index.js文件。 5. 在Vue组件中使用axios调用接口时,只需要将接口的路径改为对应的代理路径,例如: ```javascript axios.get('/api1/users') .then(response => { // 处理接口1的响应 }) .catch(error => { // 处理接口1的错误 }); axios.get('/api2/posts') .then(response => { // 处理接口2的响应 }) .catch(error => { // 处理接口2的错误 }); ``` 以上代码中,/api1和/api2就是代理路径,可以直接在axios中使用。 通过以上步骤,我们成功地解决了在Vue中使用axios调用多个接口跨域问题。注意,在开发环境下使用代理是安全的,但在生产环境要将代理改为实际的服务器地址。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值