vue-resource 跨域 post请求示例

最新推荐文章于 2025-03-25 15:20:33 发布

guxiansheng1991

最新推荐文章于 2025-03-25 15:20:33 发布

阅读量2.8w

点赞数 1

分类专栏： Vue.js javascript 文章标签： jquery vue-js 服务器 jsonp resource

本文链接：https://blog.csdn.net/guxiansheng1991/article/details/66969121

版权

javascript 同时被 2 个专栏收录

21 篇文章

订阅专栏

Vue.js

7 篇文章

订阅专栏

本文介绍如何使用vue-resource实现跨域POST请求，并提供了一个具体的示例。为了完成跨域操作，需要后端设置Access-Control-Allow-Origin。此外，还介绍了如何在jQuery中实现同样的功能。

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

vue-resource 能够跨域,一般使用jsonp,但是当需要发送大量的参数到服务器的时候,需要使用post请求.本文讲述跨域post请求,当然也包括jQuery的使用示例.

需要后端工程师配合设置 Access-Control-Allow-Origin 为 *

vue-resource 用法

this.$http.post("http://localhost:8080/cors/cors/CorsPost",{myName:"申玉超",myPwd:"123456"},{emulateJSON: true})
            .then(
              (response)=>{
                console.log(response); 
              },
              (error)=>{
                console.log(error);
              }
            );

一定要设置 {emulateJSON: true},不然跨域不成功.
如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样

在jQuery中使用(跟平常不跨域一样的写法)

$.ajax({
  url:"http://localhost:8080/cors/cors/CorsPost",
  method:"post",
  data:{myName:"申玉超",myPwd:"123456"},
  dataType:"json",
  success:function(response){
    console.log(response,"success");
  },
  error:function(error){
    console.error(error,"error");
  }
})