vue-cli解决跨域问题以及vue axios组件post传参

最新推荐文章于 2024-08-02 00:06:36 发布

置顶折尽春风

最新推荐文章于 2024-08-02 00:06:36 发布

阅读量787

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： vue

本文链接：https://blog.youkuaiyun.com/baidu_34213217/article/details/84400465

VUE 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何在Vue项目中解决跨域问题，通过配置proxyTable实现本地开发环境的代理，以及如何使用axios进行get和post请求，包括参数传递的不同方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. Vue 框架开发的时候，会遇到跨域的问题，可在config/index.js 里配置proxyTable内容，使用proxy 代理

 dev: {
  proxyTable: {
      '/api': {
        target: 'http://109.2.3.64:9091', //设置你调用的url和端口号
        changeOrigin: true,  //跨域
        secure: false,
        pathRewrite: {
          '^/api': ''   //用/api替换target中的地址
        }
      }
    }
 }

在dev.env.js中添加

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API: '"/api"'
})

至此，vue的代理设置成功
例如
访问：
http://localhost:8080/api/mem/point/info 设置代理后，变为：
http://109.2.3.64:9091/mem/point/info

2.发送请求

2. 1添加 axios组件

import axios from 'axios'
import Vue from "vue";
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$ajax = axios;

2.2get请求

testGet: function () {
  this.$ajax({
    method: 'get',
    url: '/api/mem/point/info',
    params: {
      firstName: 'Fred',
      lastName: 'Flintstone'
    }
  }).then(function (response) {
    console.log(response);
  }).catch(function (error) {
    console.log(error);
  });
},

2.3 post请求
1.

editItem:function(){
     var params = new URLSearchParams();
        params.append('memId','12121');
        params.append('saGuid','1333');
     axios.post(`/api/point/info`,params)
     .then(function(res){
         alert(res);
     })
  }

testPost: function () {
        var params = new URLSearchParams();
        params.append('name', 'hello jdmc你好');
        params.append('id', '2');
        this.$ajax({
          method: 'post',
           url: '/api/mem/point/info',
          data:params
//          data: {id: '3', name: 'abc'}
        }).then(function (response) {
          console.log(response);
        }).catch(function (error) {
          console.log(error);
        })
      }

2.4注意

在使用post方式的时候传递参数有两种方式，一种是普通方式，一种是json方式，如果后台接受的是普通方式，那么使用上述方式即可。

普通的formed方式

var params = new URLSearchParams();
params.append('name', 'hello');
params.append('id', '2');

data:params

后台接收参数

public Student greeting2(int id,String name) {

json方式

data: {id: '3', name: 'abc'}

后台接收参数

public Object greeting2(@RequestBody Object student) {