什么是跨域问题，跨域问题如何解决

最新推荐文章于 2024-07-06 09:00:00 发布

刘依铭

最新推荐文章于 2024-07-06 09:00:00 发布

阅读量1.3k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_64105376/article/details/123424822

版权

首先什么是跨域问题，跨域问题是怎么产生的哪？

说起跨域问题我们就不得不提到同源策略，即同域名同端口同协议才能访问，很显然，这种情况在如今的互联网中是根本不可能的，所以产生了跨域。那什么是跨域哪，通粗点理解，就是我在这个域，但是却想要访问另一个域的服务器。

接下来我们说一下跨域问题如何解决

第一个就是jsonp，jsonp即在html中的script标签中的src引入另一个域中的内容,如果有参数的话就在网址后面加一个?后面跟上参数。如果你还想一个回调函数的话，回调函数写在参数的后面，且回调函数的函数体要在引入src属性之前定义。就比如我下面这种方式。

<script>
    function fn() {

    }
  </script>
  <script src="你想要访问的文件或者网址?参数callback=fn"></script>

第二个是.cros（跨域资源共享），主要核心是当时用XMLHttpRequest发送请求时，如果不同源，那么会给headers中添加一个叫做Origin的属性，Origin属性在后台处理是通过Access-control-allow-origin

第三个就是h5新增的一种方式是通过postMessage实现跨域使用方式如下

widow.postMessage('字符串','作用的范围(通常用*)')

其次还有一个需要注意的就是在框架里面的跨域问题如何处理，以Vue为例，用的是proxy，它的本质其实也是.cros，它的配置项是vue.config.js。

关注