Vue发送http请求

1.创建项目

创建一个新的 Vue 2 项目非常简单。在终端中,进入您希望创建项目的目录(我的目录是D:\vue),并运行以下命令:

javascript 复制代码
vue create vue_test

2.切换到项目目录,运行项目

运行成功后,你将会看到以下的编译成功的提示,并显示本地和局域网的访问地址

并使用VS Code打开项目,项目的目录结果如下:

在node.js的目录下安装axios,输入如下的命令

安装成功后会带有"added"的提示

你可以在Vue组件中使用axios发送请求。以下是一个简单的例子,在App.vue中输入以下代码:

javascript 复制代码
<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="data">
      Fetched Data: {{ data }}
    </div>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    fetchData() {
      axios.get('http://192.168.110.174:30000/test/say')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    },
  },
};
</script>

单击页面上的"Fetch Data"按钮,按钮下面显示"Fetched Data:say my brother",观察chrom浏览器的NetWork显示发送请求成功了

到此,一个简单的Vue发送get请求的实例就完成了

3.遇到的问题

访问本地的接口出现了跨域问题

3.1解决方案:

3.1.1后端方案

以SpringBoot项目为例

java 复制代码
package com.health.manage.config;

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class SimpleCORSFilter implements Filter {
 
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest reqs = (HttpServletRequest) req;
        String curOrigin = reqs.getHeader("Origin");
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", curOrigin == null ? "true" : curOrigin);
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, HEAD");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "access-control-allow-origin, authority, content-type, version-info, X-Requested-With");
        response.setContentType("application/json;charset=UTF-8");
        chain.doFilter(req, res);
 
    }
 
    public void init(FilterConfig filterConfig) {}
 
    public void destroy() {}
 
}
3.1.2.前端方案

(1)在vue.config.js中设置代理,如下所示:

java 复制代码
module.exports = {
  devServer: {
      proxy: {
          '/api': { // 请求的代称,写在Axios里的BaseUrl
              target: 'http://192.168.110.174:30000', // 真实请求URl
              ws: true,
              changeOrigin: true, // 允许跨域
              pathRewrite: { //替换,通配/api的替换成对应字符
              //     /* 重写路径,当我们在浏览器中看到请求的地址为:http://localhost:8080/api/core/getData/userInfo 时
              //       实际上访问的地址是:http://localhost:8088/spring/core/getData/userInfo,因为重写了 /api
              //      */
                  '^/api': '' //当你的接口中没有/api字眼时,采用这种,直接替换成空即可
              //     '^/api': '/api'   //当你的接口中刚好有/api 时,采用这种方式
              }
          }
      }
  }
}

(2)在main.js中输入全局路径:Vue.prototype.HOST = '/api';

java 复制代码
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
Vue.prototype.HOST = '/api';

new Vue({
  render: h => h(App),
}).$mount('#app')

(3)在App.vue中设置get请求

java 复制代码
<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="data">
      Fetched Data: {{ data }}
    </div>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    fetchData() {
      axios.get(this.HOST+'/test/say')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    },
  },
};
</script>

(4)由于使用了代理,页面访问的是http://localhost:8080/api/test/say,实际访问的是http://192.168.110.174:30000/test/say,完美解决了跨域问题

相关推荐
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年5 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子5 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina5 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路6 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_6 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding7 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js