vue跨域的解决方法


本文摘自PHP中文网,作者一个新手,侵删。

vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。

要想本地正常的调试,解决的办法有三个:

一、后台更改header


1

2

header('Access-Control-Allow-Origin:*');//允许所有来源访问 

header('Access-Control-Allow-Method:POST,GET');//允许访问的方式   

这样就可以跨域请求数据了。

二、使用JQuery提供的jsonp (注:vue中引入jquery,自行百度)


1

2

3

4

5

6

7

8

9

10

11

12

13

14

methods: { 

  getData () { 

    var self = this 

    $.ajax({ 

      url: 'http://f.apiplus.cn/bj11x5.json', 

      type: 'GET', 

      dataType: 'JSONP', 

      success: function (res) { 

        self.data = res.data.slice(0, 3) 

        self.opencode = res.data[0].opencode.split(',') 

      

    }) 

  

}

通过这种方法也可以解决跨域的问题。

三、使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)

例如请求的url:“http://f.apiplus.cn/bj11x5.json”

阅读剩余部分

相关阅读 >>

h5正常文本框提示语的实现方法

检测javascript里最有效率的功能特征的方法解析

下载新浪微博视频和秒拍视频的方法

用canvas+gif.js实现数字雨头像的方法

html中引入外部页面的方法

vue文件中html代码格式化方法

javascript方法(函数)的定义方式有哪些

jquery中如何实现toggle方法

用css制作立体导航栏的方法

javascript的方法是函数吗

更多相关阅读请进入《方法》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...