详解Vue 开发模式下跨域问题

发布时间：2020-12-17 02:56:07 所属栏目：百科来源：网络整理

导读：设置请求头部后端设置请求头部 Access-Control-Allow-Credentials: true 和 Access-Control-Allow-Origin: www.xxx.com 前端post请求设置 withCredentials=true 这里用了axios的请求数据方法代码如下： if (!uri) { console.error('API function call requi

设置请求头部

后端设置请求头部Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin: www.xxx.com
前端post请求设置withCredentials=true
这里用了axios的请求数据方法代码如下：

if (!uri) {
console.error('API function call requires uri argument')
return
}

let url = config.serverURI + uri

return axios({ method,url,...headerConfig })
}
}

jQuery的$.ajax:：

{ // balabala... })

使用nodejs做代理

上面的那种方法需要后端配合设置头部，对于我这种前端小白来讲，联调时各种不成功的报错也无从解决，所以个人比较倾向于下面这种做法，鉴于使用脚手架vue-cli创建的项目，作者已经给我提供好了解决的方法。
找到项目文件夹下的config/index.js,里面有一行proxyTable: {},这里就是作者为我们留的接口,我们添加代理规则进去

这里target为目标域名，pathRewrite为转换规则，请求数据时将接口地址根据转换规则请求就可以解决跨域啦！（这里也可以配置headers，设置cookis，token等）

jsonp

jsonp也是一种解决跨域的方法，不过我从来没有用过，在网上查了下资料，jsonp的原理是script标签引入js是不受域名限制的,由于是模拟插入script标签,所以不可以用post请求。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!