解决Vue请求 ‘No 'Access-Control-Allow-Origin' header is present on the requested resource’错误

绝地灬酷狼 2022-05-13 06:42 199阅读 0赞

如果我们用VueResouce直接请求，这样写（以豆瓣api为例）：

this.$http.get('https://api.douban.com//v2/movie/top250').then((response) => {
            this.movie = response.data;
            console.log(this.movie); 
    });

就会报错：![1115270-20170301205615360-810564621.png][]

因为这是一个跨域的请求，不能直接去访问别的后台，这里可以用JSONP解决这个问题，直接改写成：

![复制代码][copycode.gif]

this.$http.jsonp('https://api.douban.com//v2/movie/top250', {},
       { 
          headers: {},
          emulateJSON: true }).then((response) => {
            this.movie = response.data;
            console.log(this.movie);
          });

![复制代码][copycode.gif]

就能够正确返回数据了：

![1115270-20170301210200532-1595911638.png][]

豆瓣默认返回20个数据,你可以通过start=a&count=b来取得你想要的a-b的数据

至于想了解什么是jsonp，可以看这位博主的文章，讲的很详细：

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

[1115270-20170301205615360-810564621.png]: /images/20220513/e1e0f18ade6b45a6baf46dad5100b675.png
[copycode.gif]: /images/20220513/d78310be10f540e5bfff2f60fb625da0.png
[1115270-20170301210200532-1595911638.png]: /images/20220513/2ecbbe9e9e27446899e3f55d46e219b2.png

解决Vue请求 ‘No 'Access-Control-Allow-Origin' header is present on the requested resource’错误

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关完美解决：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource

相关 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

相关 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.

相关【ASP.NET】 No 'Access-Control-Allow-Origin' header is present on the requested resource.

相关 Post request is No 'Access-Control-Allow-Origin' header is present on the requested resource跨域问题解决

相关 Spring Cloud Zuul No 'Access-Control-Allow-Origin' header is present on the requested resource.

相关解决Vue请求 ‘No 'Access-Control-Allow-Origin' header is present on the requested resource’错误

相关 No 'Access-Control-Allow-Origin' header is present on the requested resource.

相关跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested resource

相关 CORS policy: header is present on the requested