Vue笔记——解决Vue请求No 'Access-Control-Allow-Origin' 错误

最新推荐文章于 2025-06-12 10:10:20 发布

fengzhen8023

最新推荐文章于 2025-06-12 10:10:20 发布

阅读量2.3w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue 跨域请求

本文链接：https://blog.youkuaiyun.com/fengzhen8023/article/details/83035596

Vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍在Vue项目中如何解决跨域请求问题，通过使用jsonp替代get方法，实现跨域数据获取，适用于不同域的数据请求场景。

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

一、问题描述

一般情况下我们在Vue项目中使用vue-resource这个组件请求数据的时候，可能会直接使用以下代码：

this.$http.get("https://api.douban.com//v2/movie/top250")
  .then(function (reponse) {
    console.log(reponse);
  })

这里我们使用的是get请求方法，如果请求的是本地数据，或者说着说请求的数据没有跨域，使用get方法是没有问题的。但是如果请求的是不同域的数据，就要受到同源策略的影响，请求不成功，并抛出No ‘Access-Control-Allow-Origin’ 错误。比如我们使用上方的代码请求豆瓣的数据，那么就会抛出以下的错误。

二、解决方法

在Vue项目中受到同源策略的影响，使用get方法不能跨域请求数据，这个时候我们可以使用jsonp这样一种模式（或者称之为协议），来请求数据。例如我们要请求豆瓣的数据，只需将上述代码中的get给成jsonp即可：

 this.$http.jsonp("https://api.douban.com//v2/movie/top250")
   .then(function (reponse) {
     console.log(reponse);
   })

这样就可以顺利请求到豆瓣的数据：

三、补充说明

HTTP请求方法有多种：GET、POST、HEAD、OPTIONS、PUT、DELETE、TRACE、CONNECT等8种方法。我们在项目中使用最多的是GET和POST请求。

在上文中我们提到使用jsonp代替get可以实现跨域请求，但是我们要明确一点，get是请求方法，但是jsonp不是请求方法。jsonp是一种请求的协议，或者你也可以称之为模式。

而且使用jsonp代替get之后，本质上使用的还是get请求方法，因为jsonp只支持get这一种网络请求方法。关于jsonp的更多知识，推荐你阅读文章：说说JSON和JSONP，也许你会豁然开朗