vue学习十七(vue-resource使用)

最新推荐文章于 2025-06-19 11:15:00 发布

原创最新推荐文章于 2025-06-19 11:15:00 发布 · 421 阅读

0 ·

CC 4.0 BY-SA版权

React\Vue 同时被 2 个专栏收录

19 篇文章

订阅专栏

Vue

18 篇文章

订阅专栏

本文介绍如何利用Vue.js和其插件vue-resource进行跨域请求，包括GET和POST请求的具体实现，以及后端如何配置以支持跨域。

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

文章目录

- - 前端代码
  - 后端代码(处理跨域)

Vue.js是数据驱动的，这使得我们并不需要直接操作DOM，如果我们不需要使用jQuery的DOM选择器，就没有必要引入jQuery。vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面

前端代码

我们总结2个例子，通过vue-resource实现跨域请求，get和post请求

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意  -->
  <!-- this.$http.jsonp -->
  <script src="./lib/vue-resource-1.3.4.js"></script>
</head>

<body>
  <div id="app">
    <input type="button" value="get请求" @click="getInfo">
    <input type="button" value="post请求" @click="postInfo">
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        name: "safly",
        sex: "男"
      },
      methods: {
        getInfo() { // 发起get请求
          this.$http.get('http://localhost:8080/pingg').then(result => {
            console.log(result.body)
          })
        },
        postInfo() {
          // 发起 post 请求   application/x-wwww-form-urlencoded
          //  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
          //  通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
          this.$http.post('http://localhost:8080/pingp', {
            name: this.name,
            sex: this.sex
          }, { emulateJSON: true }).then(result => {
            console.log(result.body)
          })
        },
      }
    });
  </script>
</body>

</html>

后端代码(处理跨域)

package main

import (
	"fmt"
	"github.com/gin-gonic/gin"
	"net/http"
	"strings"
)
func main() {
	r := gin.Default()
	r.Use(Cors())
	r.GET("/pingg", func(c *gin.Context) {
		c.JSON(200, gin.H{
			"message": "pingg",
		})
	})

	r.POST("/pingp", func(c *gin.Context) {
		name := c.PostForm("name")
		sex := c.PostForm("sex")
		fmt.Println("name>>>",name,"sex>>>",sex)

		c.JSON(200, gin.H{
			"message": "pingp",
		})
	})
	r.Run()
}


func Cors() gin.HandlerFunc {
	return func(c *gin.Context) {
		method := c.Request.Method      //请求方法
		origin := c.Request.Header.Get("Origin")        //请求头部
		var headerKeys []string                             // 声明请求头keys
		for k, _ := range c.Request.Header {
			headerKeys = append(headerKeys, k)
		}
		headerStr := strings.Join(headerKeys, ", ")
		if headerStr != "" {
			headerStr = fmt.Sprintf("access-control-allow-origin, access-control-allow-headers, %s", headerStr)
		} else {
			headerStr = "access-control-allow-origin, access-control-allow-headers"
		}
		if origin != "" {
			c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
			c.Header("Access-Control-Allow-Origin", "*")        // 这是允许访问所有域
			c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE,UPDATE")      //服务器支持的所有跨域请求的方法,为了避免浏览次请求的多次'预检'请求
			//  header的类型
			c.Header("Access-Control-Allow-Headers", "Authorization, Content-Length, X-CSRF-Token, Token,session,X_Requested_With,Accept, Origin, Host, Connection, Accept-Encoding, Accept-Language,DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Pragma")
			//              允许跨域设置                                                                                                      可以返回其他子段
			c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers,Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma,FooBar")      // 跨域关键设置 让浏览器可以解析
			c.Header("Access-Control-Max-Age", "172800")        // 缓存请求信息 单位为秒
			c.Header("Access-Control-Allow-Credentials", "false")       //  跨域请求是否需要带cookie信息 默认设置为true
			c.Set("content-type", "application/json")       // 设置返回格式是json
		}

		//放行所有OPTIONS方法
		if method == "OPTIONS" {
			c.JSON(http.StatusOK, "Options Request!")
		}
		// 处理请求
		c.Next()        //  处理请求
	}
}

测试效果如下：
get请求：

{message: "pingg"}

post请求

{message: "pingg"}
 {message: "pingp"}

后端log输出如下：

GIN] 2018/10/15 - 11:46:51 | 200 |     155.089µs |             ::1 | GET      /pingg
name>>> safly sex>>> 男