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”

阅读剩余部分

相关阅读 >>

php无刷新提交表单另一种方法

pushstate、popstate操作url的方法

button有几种click响应方法

html怎么引用css?html引用css有几种方法

elementui的默认样式修改方法分享

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

怎么实现css文字垂直居中?实现css文字水平居中的4种方法

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

jquery判断是否为数字的方法是什么

如何查看当前文档某个元素的子节点?有几种方法

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




打赏

取消

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

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

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

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

评论

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