通过多种方法解决前端请求出现跨域问题

最新推荐文章于 2024-05-08 00:18:18 发布

浩浩不睡觉

最新推荐文章于 2024-05-08 00:18:18 发布

阅读量4.3k

点赞数 2

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_47347505/article/details/123390835

版权

本文介绍了前端跨域的概念，由于浏览器的同源策略限制，导致了跨域问题。文中提供了两种解决方法：一是利用JSONP技术，通过在VSCode中安装插件并在实际案例中应用；二是结合Vue项目，使用Vue配置文件vue.config.js中的Proxy代理，通过创建虚拟服务器规避同源策略，实现数据获取。

摘要由CSDN通过智能技术生成

一、什么是跨域？

在说跨域之前，还得说下什么是同源策略，同源策略就是不同源直接的页面，不准互相访问数据，源 = 协议 + 域名 + 端口，如果两个url的协议、域名、端口都一样，那么这两个url就是同源的，正式由于同源策略的影响导致了浏览器在请求服务器资源时出现了跨域。
跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了

二、解决跨域

1、Jsonp
首先得在vscode中安装jsonp

npm install jsonp -S

这是之前练习中，使用腾讯地图api时，通过jsonp来解决跨域

getArea(city) {
   
      var data = {
   
        key: 'VIWBZ-4QICU-LGCV4-4AVBQ-4BXC6-MDTBK' // 这个key就是你申请的密钥
      }
      var url = `https://apis.map.qq.com/ws