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 watch响应数据实现方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
vuedraggable 是一个基于强大的 Sortable.js 库的 Vue 组件,它允许你通过拖拽的方式对列表进行排序、移动、克隆等操作,并且与 Vue 的数据响应式系统无缝集成,本文介绍Vue Draggable实现拖拽功能,感兴趣的朋友跟随小编一起看看吧2025-10-10
在Vue项目中使用v-if指令控制ECharts图表显示时,可能会遇到图表无法正常渲染或显示错误的问题,下面这篇文章主要介绍了Vue中使用ECharts与v-if的问题和解决方案,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了vue中defineProperty和Proxy的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
使用vue打包时vendor文件过大或者是app.js文件很大的问题
这篇文章主要介绍了使用vue打包时vendor文件过大或者是app.js文件很大问题的解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
文章介绍了如何在需求系统中创建一个位于页面上方的公告展示组件,展示了如何在App.vue或其他页面组件中使用这个公告组件,感兴趣的朋友一起看看吧2025-01-01
详解vue-cli中的ESlint配置文件eslintrc.js
本篇文章主要介绍了vue-cli中的ESlint配置文件eslintrc.js详解 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
element-plus中el-upload组件限制上传文件类型的方法
Element Plus 中,el-upload 组件可以通过设置 accept 属性来限制上传文件的格式,这篇文章主要介绍了element-plus中el-upload组件限制上传文件类型,需要的朋友可以参考下2024-02-02
vant组件表单外部的button触发form表单的submit事件问题
这篇文章主要介绍了vant组件表单外部的button触发form表单的submit事件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
本文分步骤给大家介绍了vue2.0+webpack环境的构造过程的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-11-11
最新评论