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解决跨域问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了浅谈vuejs实现数据驱动视图原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要给大家介绍了关于vue实现移动端table表格简单方法的相关资料,使用Vue.js开发移动应用程序时,经常需要使用各种UI组件,其中el-table是一个常用的表格组件,可以方便地展示数据,需要的朋友可以参考下2023-09-09
最近做了一个手机端系统，其中遇到了父页面需要携带参数跳转至子页面的问题，现已解决，下面分享一下实现过程，感兴趣的朋友一起看看吧2021-04-04
这篇文章主要为大家详细介绍了Vue如何使用$attrs实现爷爷直接向孙组件传递数据,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下2024-02-02
这篇文章主要介绍了vue如何在线预览各类型文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
在Vue中,组件的props属性用于定义组件可以接收的外部数据,这些数据来自父组件并传递给子组件,本文给大家介绍了Vue使用Props实现组件数据交互,文中有详细的代码示例供大家参考,需要的朋友可以参考下2024-06-06
本文主要介绍了vue打包并部署到nginx上的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01
今天遇到一个在vue文件中引入本地图片的问题,于是有了这篇文章,本文主要给大家介绍了关于前端Vue页面中展示本地图片的相关资料,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了axios在Vue项目中用来向后台发送请求（调接口API），获取响应信息的方法,axios 是一个轻量的 HTTP客户端，基于 XMLHttpRequest 服务来执行 HTTP 请求，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了Vue子组件关闭后调用刷新父组件的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
最新评论