vue解决跨域问题的几种方式
更新时间：2023年07月22日 10:17:56 作者：下班别坐805
这篇文章主要给大家介绍了关于vue解决跨域问题的几种方式,跨域跨域报错是前端开发中非常经典的一个错误,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
发现问题
在使用axios发送请求之后，没有得到返回的数据，打开控制台发现如下图所示的报错：
这是提示跨域了。所有使用JavaScript的浏览器都会支持同源策略。同源策略即指域名/协议/端口号相同。只要有一个不同，就会当作跨域请求。
解决方法为：
1. CORS
后端通过 CORS 解决跨域,在响应头中添加:
Access-Control-Allow-Origin: <origin>
前端就可以通过 axios 跨域访问该后端 API。
2. proxy
在 vue.config.js 中配置 proxy 代理跨域:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
} 这样前端请求 '/api' 会被代理到 'http://localhost:8080',实现跨域。
3. JSONP
通过动态创建 <script> 标签跨域获取数据:
function getdata(url, callback) {
var script = document.createElement('script')
script.src = url + '?callback=' + callback
document.body.appendChild(script)
}
getdata('http://example.com/getdata?a=1', 'callback')
function callback(data) {
console.log(data)
}服务端返回的 JSON 数据会作为 callback 函数的参数,实现跨域数据获取。
4. postMessage
在跨域的两个 window 之间通信:
// window1
window.addEventListener('message', function(e) {
console.log(e.data)
}, false)
// window2
var win = otherWindow.window
win.postMessage('message', 'http://example.com')其他方案还有 Web Sockets、nginx 代理等。
总结一下，解决vue跨域的方法有：
1. 后端通过 CORS 添加响应头
2. Vue CLI proxy 代理跨域
3. JSONP 通过动态 <script> 标签跨域
4. postMessage 跨 window 通信
5. Web Sockets
6. nginx 反向代理
理解跨域问题的原理和常用解决方案对前端工程师来说是非常重要的。
总结
到此这篇关于vue解决跨域问题的几种方式的文章就介绍到这了,更多相关vue解决跨域问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue+scss白天和夜间模式切换功能的实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
本篇文章主要介绍了详解VUE2.X过滤器的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue+element实现锚点链接方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了VUE 动态组件的应用,结合具体案例形式分析了vue.js动态组件的应用场景、解决方案及相关操作技巧,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue数据对象length属性未定义问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了使用Vue-cli 中为单独页面设置背景图片铺满全屏，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
今天小编就为大家分享一篇vue 中滚动条始终定位在底部的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了基于vue中的scoped坑点解说，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要为大家详细介绍了Vue.js实现时间轴功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了Nuxt.js实战和配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
最新评论