精华内容
下载资源
问答
  • 设置axios.defaults.axios.defaults.baseURL后打包部署到tomcat ,请求后台时发现请求路径开头变成 包名+baseURL了。 请问如何将包名去掉?</p>
  • Vue:axios请求传参问题

    2020-03-25 23:27:57
    今天在 vue 前后端分离时。遇到传参的问题,在网上看了看资料,现在来分享一下,以便以后使用。...1、get 请求 (放在params 中或者直接拼接到路径中) Axios.get('demo/url', { params: { id: 123, ...

    今天在 vue 前后端分离时。遇到传参的问题,在网上看了看资料,现在来分享一下,以便以后使用。

    主要的请求类型有:get,post,put,delete,patch
    注:每种类型传递参数的方法都不一样,注意区分。

    1、get 请求 (放在params 中或者直接拼接到路径中)

    
    Axios.get('demo/url?id=123&name=Henry&sex=1&phone=1333333'
    })
    

    后台接受

    注: 参数一定还要和  url 中的参数一致
    public AjaxResult list(int id,String name,int sex,String phone){
    	return null;
    }
    

    2、post 请求

    Axios.post('demo/url', {
        id: 123,
        name: 'Henry',
        sex: 1,
        phone: 13333333
    })
    

    后台接受方式
    用@RequestBody 接受 可以是map 类型或者是 实体类,但是实体类的属性必须和 传递的参数一致。
    例如:

    public AjaxResult list(@RequestBody Map<String,Object> map){
    	return null;
    }
    
    or  
    public AjaxResult list(@RequestBody User user){
    	return null;
    }
    

    3、put 请求

    Axios.put('demo/url', {
        id: 123,
        name: 'Henry',
        sex: 1,
        phone: 13333333
    })
    

    后台的接受和 post 方式一样

    4、delete 请求(存放在data中)

    Axios.delete('demo/url', {
        data: {
            id: 123,
            name: 'Henry',
            sex: 1,
            phone: 13333333
        }
    })
    

    5、patch请求

    Axios.patch('demo/url', {
        id: 123,
        name: 'Henry',
        sex: 1,
        phone: 13333333
    })
    
    展开全文
  • vue.js+axios请求跨域问题、session丢失问题(已解决)

    万次阅读 热门讨论 2018-05-24 15:35:13
    用的vue.js+axios请求问题:1:开发环境中前后端分离端口号不同导致跨域问题(403错误)2:跨域解决后,前端用axios post方式请求后端(springmvc),后端拿不到参数3:能拿到参数后后端报500错误,debug发现session...

    场景:实现生成图片验证码和检验验证码是否正确的功能;用的vue.js+axios请求

    问题:

    1:开发环境中前后端分离端口号不同导致跨域问题(403错误)

    2:跨域解决后,前端用axios post方式请求后端(springmvc),后端拿不到参数

    3:能拿到参数后后端报500错误,debug发现session为空(但是在生成验证码接口session是存在的),也就是在检测验证码是否正确的请求中session丢失

    解决:

    1:使用代理方式解决跨域:

        在config/index.js里边找到:

    proxyTable: {      // 请求到/manage/code/check 现在会被代理到请求 http://localhost:8081/manage/code/check。
          '/manage': {//名字必须跟application context相同 否则404
            target: 'http://localhost:8081',
            changeOrigin: true               //  跨域
            // pathRewrite: {
            //   '^/manage': 'manage'
            // }
          }
        }

    代理后的请求路径:checkImgUrl: '/manage/code/check'

    注意:代理名要与application context相同;跨域changeOrigin: true;RewritePath,是将对资源的请求重定向到另一路径,使其不同于所请求 URL 指示的路径,看需求要不要加

    2:axios post请求传参(对象

    请求:
    onSubmit(formName) {
      console.log(this.product);
      let book={
        bname:this.product.bname,
        author:this.product.author,
        img:this.product.img,
        brief:this.product.brief,
        publisher:this.product.publisher,
        ddprice:this.product.ddprice,
        price:this.product.price,
        categoryId:this.product.categoryId,
        status:'1'
      }
      this.$http.post(this.addUrl,book)
        .then((res)=>{
          console.log(res);
          if (res.data.code==1){
            this.$router.push("/toMain/productInfo");
            this.$message({
              type:'success',
              message:'图书添加成功',
              center: true
            })
          }else {
            this.$message.error("图书添加失败!");
          }
        })
    }

    (项目中登录竟然晕着脑袋写成post,后端是get自然取不到参数)

    get请求:

    this.$http.get(this.submitUrl, {
      params: {
        name: this.admin.username,
        pass: this.admin.pass
      }
    })

    3:问题在于请求路径不对

        首先看session为空,排除换浏览器、重启服务器导致session清空,想到session的唯一标识是sessionid,而sessionid存放在cookie中随请求携带,因此想到可能是请求头中的cookie携带sessionid不存在

        开始代理的代码:(错误示范)

        

    // proxyTable: {
        //   '/api': {//
        //     target: 'http://localhost:8081',
        //     changeOrigin: true,                 
        //     pathRewrite: {
        //       '^/api': 'api'
        //     }
        //   }
        // },

    使用:checkImgUrl: '/api/manage/code/check'

    真正的session路径在/manage下,但是上面这个请求虽然被代理到http://localhosst:8081/manage接口,但是请求http://localhosst:8080/api/manage携带的cookie在/api路径,在/api路径找/manage下cookie自然找不到,就导致虽然能访问到接口但session为空

    正确写法就是问题1中的写法,代理对象名与后台application· context相同!




    展开全文
  • vue的脚手架2和3中解决跨域 在src文件里建立api文件夹里...// 是对axios请求做了一个封装 import axios from 'axios'; export default function ajax(url, data={},method='GET'){ return new Promise((resolve, rej...

    vue的脚手架2和3中解决跨域

    在src文件里建立api文件夹里有两个文件

    • ajax.js
    • index.js
    ajax.js
    // 是对axios请求做了一个封装
    import axios from 'axios';
    export default function ajax(url, data={},method='GET'){
    return new Promise((resolve, reject) => {
      let promise
      if(method==='GET'){
        promise=axios.get(url, {params: data})
      }else{
        promise=axios.post(url, data)
      }
      promise.then(
        response => {
          resolve(response.data)
        },
        error => {
          alert('请求异常:' + error.message)
        }
      )
    })
    }
    
    //index.js
    import ajax from './ajax.js';
    const BASE='/api'
    export const reqAddress= (longitude,latitude) => ajax(BASE + `/position/${latitude},${longitude}`)
    export const reqCategory= () => ajax(BASE + `/index_category`)
    export const reqShops= (longitude,latitude) => ajax(BASE + `/shops?`,{latitude,longitude})
    

    脚手架2中在config–》index.js的proxyTable属性中设置

    proxyTable: {
          '/api':{  //匹配所有以'/api'开头的请求路径
            target:'http://localhost:5000', //代理目标的基础路径
            changeOrigin: true,//支持跨域
            pathRewrite: { //重写路径:去掉路径中开头的'/api'
              '^/api': ''
            }
          }
        },
    

    脚手架3中在根目录新建文件vue.config.js文件的proxyTable属性中设置

    module.exports={
       devServer: {
        proxy: {
          '/api':{  //匹配所有以'/api'开头的请求路径
            target:'http://localhost:5000', //代理目标的基础路径
            changeOrigin: true,//支持跨域
            pathRewrite: { //重写路径:去掉路径中开头的'/api'
              '^/api': ''
            }
          }
        },
      }
    }
    
    展开全文
  • 在main.js 中的前部添加以下代码 // 设置统一的axios请求路径 axios.defaults.baseURL = 'http://localhost:80/' // 定义元素的axios请求 Vue.prototype.$http = axios

    在main.js 中的前部添加以下代码

    // 设置统一的axios请求路径
    axios.defaults.baseURL = 'http://localhost:80/'
    // 定义元素的axios请求
    Vue.prototype.$http = axios
    
    展开全文
  • 经验主义使然下写下了这个路径,但返回404 this.axios.get('public/redeme.json').then((res) => { console.log(res.data) }) 其实vue从代码到界面展示还要经过编译,所以路径会有所改变 实际路径可以先打包...
  • vue 项目中使用axios请求了本地项目的static文件夹下的json文件,使用npm run build 打包后,在Hbuilder编辑器打开,页面报错404: 在浏览器打开的路径 http://127.0.0.1:8020/poverty/dist/index.html 我们可以...
  • axios请求拦截

    2021-01-31 11:06:55
    import axios from 'axios' ...// axios请求拦截 axios.interceptors.request.use(config => { // console.log(config) // 为请求头添加token验证的Authorization字段 config.headers.Authorization = w
  • 原因: 直接在swagger上复制的请求路径,有时候会有些稀奇古怪的问题, 手写一次就好
  • axios 请求数据

    2020-07-11 09:32:31
    axios请求方法 get请求:获取数据 2个参数 url,config axios.get('/index.json',{params:{id:12}}).then((res)=>{console.log(res)}) axios({method:'get',url:'/index.json',params:{id:12}}).then((res)=>...
  • Axios请求方式

    2021-07-15 22:52:58
    script src="axios.js路径"></script> 请求方法 GET、DELETE axios.请求方法(get, delete)("接口文档的接口地址", { params: { 接口文档中的参数: "要携带的值" } }).then(res => {
  • 封装axios请求接口

    2020-10-07 14:39:50
    封装axios请求接口 传统的axios请求只适合小型项目那种只有几个请求接口的但是一但项目过大接口过多的话使用传统的axios请求就显得不太合理而且太过于麻烦 比如请求接口发生了改变的话那么就得需要一个一个的去更改 ...
  • axios请求拦截器是方便在某个个项目时,每次都有一个同样的请求,我们可以配置一个axios请求拦截器来方便我们的操作 因为每次发起请求时,请求都回经过request.interceptors.request.use这里,所以在此配置,每次...
  • vue axios 请求跨域

    2020-11-25 17:40:18
    1、将axios后端请求和前端请求分离开 这点是用baseURL做到,前端不需要baseUrl,baseURL可以直接配置成后端的公共地址 如果不用代理而直接请求的话,可以是这个样子: let host = 'localhost'; let port = '8080'; /...
  • axios请求封装 1、安装 npm I axios 2、首先在根目录下建立server.js文件内容如下 import axios from 'axios' axios.defaults.baseURL = '' //根据项目自己更改 //一些配置,发起请求和响应可以打印出来查看 axios....
  • axios指定请求路径为/vue/user/findAll 浏览器实际访问路径http://localhost:8080/vuejsdemo/user/findAll.do。 注:项目设置的端口8080.项目名vue 原因: 浏览器的缓存中的端口号和项目名为8080,vuejsdemo。...
  • axios请求数据

    2021-07-27 16:55:31
    接口路径和method类型看接口文档 this.$axios.postForm('/goods/goodsDelete', { id:id }) .then(res=>{ if(res.code==this._global.SUCCESS_CODE){ //需要判断请求接口返回参数上是否成功,这个code是后端...
  • axios请求,跨域问题,设置跨域代理

    千次阅读 2020-11-17 13:41:41
    生成一个vue项目之后,开始写请求请求数据,渲染到前端界面,有时候直接请求服务器上的接口,会遇到跨域问题,遇到跨域的时候,需要设置跨域代理~ 1:进入新建的项目之中,使用npm安装axios模块。 npm install ...
  • Vue Axios请求随笔

    2020-09-12 12:57:38
    Axios请求 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 Axios特性 1. 从浏览器中创建 XMLHttpRequests 2. 从 node.js 创建 http 请求 3. 支持 Promise API 4. 拦截请求和响应 5. 转换...
  • axios 请求nodeIntroduction 介绍 A video tutorial 视频教程 Installation 安装 The Axios API Axios API GET requests GET请求 Add parameters to GET requests 向GET请求添加参数 POST Requests POST请求 介绍 ...
  • axios设置请求路径 import axios from 'axios' // 设置请求路径 axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' <!DOCTYPE html> <html lang="en"> <head> <meta ...
  • axios 公共路径

    2019-10-02 10:32:26
    axios.defaults.baseURL='http://localhost:8888/api/private/*' 转载于:https://www.cnblogs.com/xiannv/p/11203482.html
  • vue axios请求 配置

    万次阅读 多人点赞 2019-03-02 15:29:22
    axios : 基于http客户端的promise,面向浏览器和...axios 依赖原生的 ES6 Promise 实现而被支持. 安装 1.使用npm: npm install axios 2.使用taobao源: cnpm install axios 3.使用bower: bower install ax...
  • vue用axios请求后台接口:先执行cnpm install axios --save 然后再main.js文件中引入: 接下来就可以在页面中请求接口了:(这样写的话可能会产生跨域的问题:) 记得在页面中引入:import axios from 'axios’ ...
  • 今天仍然在学习Vue,出现了一个我意料之中的问题请求跨域问题 我想通过主机来访问豆瓣里面的json数据 首先按照python爬虫的思想,我掏了一个豆瓣json数据的url地址信息及参数 ① 基本url: ...
  • import axios from ‘axios’ import nprogress from ‘nprogress’ import {Message} from ‘element-ui’ // 运行环境: 本地环境:devlpment 和线上(生产)环境: production const isPro = process.env.NODE_ENV ===...
  • axios请求xsl表格文件流 需求 前端请求一个路径 来下载后台写的文件流 download() { //axios 路径 excel('/a/b/c',{responeseType:'blob'}).then(res => { var blob = new Blob([res], { type: ...
  • Vue axios 请求拦截器

    2020-11-21 16:56:26
    提示:项目中使用到的axios请求拦截器,在此仅仅是记录,以下附上全部代码。 1.引入axios js代码如下: import axios from "axios"; import { MessageBox } from 'element-ui' //可以不用,此处是使用elementUI 的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,383
精华内容 6,153
关键字:

axios请求路径问题