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”

阅读剩余部分

相关阅读 >>

html5音频与视频问题及解决方法

页面重绘及回流的优化方法

jquery中如何实现toggle方法

css如何让div居中?css实现div居中的方法

高手教您如何取消(加上)下划线样式?两大方法汇总

javascript中创建对象的方法有哪几种

利用html5以及canvas实现支持签名插件的方法

h5表单验证有哪些方法

集成ueditor富文本编辑器的方法

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

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




打赏

取消

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

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

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

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

评论

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