位置: IT常识 - 正文

Vue中的跨域解决方案(vue中解决跨域问题)

编辑：rootadmin

Vue中的跨域解决方案前言

推荐整理分享Vue中的跨域解决方案(vue中解决跨域问题)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue跨域问题解决,vue解决跨域的原理,vue跨域问题的三种解决方案,vue跨域解决方案简书,vue解决跨域的原理,vue跨域解决方案简书,vue跨域解决方案简书,vue跨域解决方案简书,内容如对您有帮助，希望把文章链接给更多的朋友！

跨域是因为浏览器存在对不同源页面数据接收的限制。这种限制就是浏览器的同源策略。

同源策略是浏览器的安全机制，跨域的原理就是通过各种方式避开浏览器的安全机制

使用

在项目开发时，对跨域的概念仅限于了解，所以没有注重过程，只注重结果。所以在开发项目时，使用的是市面上比较常用，并且能够一劳永逸的cors。虽然cors方法能够完美解决跨域问题，但是还是要秉持着对知识探索的态度，去深入理解跨域问题。

报错提示

这里我使用8080端口的客户端访问3000端口的服务器，结果报错。

原因是因为端口号不同产生跨域。

如果将服务器端口号改为8080就不会报错了。

跨域方法

跨域的方法有cors、Proxy正向代理、Nginx反向代理、Jsonp

现阶段跨域方式有很多种，但是基本思想只有两种：

绕过同源策略

Jsonp：历史遗留的产物，虽然思想很好，但是局限性太大（仅支持get、因为数据是在url中，所以携带数据小）。

原理：有三个标签不受同源策略影响：<script src="xxx"></script><link herf="xxx"></link><img src="xxx"></img>实现： // 1.创建script var script = document.createElement('script') // 2.定义回调函数 function getData(data) { // 调用函数返回的数据 console.log(data); } // 3.设置src属性 script.src = 'http://localhost:3000?callback=getData' // 4.让cript生效 document.appendChild(script)

Nginx：通过反向代理绕过去，这是很完美的解决方案，加上会给服务器增加一点压力，不过这点压力问题并不大

如何理解反向代理：代理服务器代替目标服务器去接收并响应给客户端发起的请求。隐藏服务器。

发起请求：客户端向代理服务器发出请求，代理服务器再将请求转发给目标服务器

响应数据：目标服务器向代理服务器响应数据，代理服务器再向数据响应给客户端

很常用的方法，像网易、头条都使用nginx代理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ddoEgRFd-1656482203293)(https://juejin.cn/)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4M4avsX0-1656482203293)(https://juejin.cn/)]

这是我在chrome上看的某些文件。

nginx使用：

下载nginx

直接到官网下载