解决跨域问题

最新推荐文章于 2023-12-15 17:54:55 发布

.慢慢亦漫漫

最新推荐文章于 2023-12-15 17:54:55 发布

阅读量420

点赞数 1

分类专栏： Ajax 文章标签： javascript ajax 前端

本文链接：https://blog.csdn.net/weixin_43183219/article/details/124687483

版权

本文详细介绍了跨域的概念及其由浏览器的同源策略引起的限制。探讨了三种跨域解决方案：JSONP的工作原理、优缺点及实现步骤；CORS的Header配置和实现方式；以及Node中间件代理的实现过程。总结中指出，CORS是全面的跨域解决方案，而JSONP适用于简单请求和老式浏览器，Node代理则常用于服务器之间的跨域请求。

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

什么是跨域

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

同源策略限制了以下行为：

Cookie、LocalStorage 和 IndexDB 无法读取
DOM 和 JS 对象无法获取
Ajax请求发送不出去

什么是同源

同源是指域名、协议、端口均相同。
例如：
http://www.nealyang.cn/index.html 调用   http://www.nealyang.cn/server.php  非跨域

http://www.nealyang.cn/index.html 调用   http://www.neal.cn/server.php  跨域,主域不同

http://abc.nealyang.cn/index.html 调用   http://def.neal.cn/server.php  跨域,子域名不同

http://www.nealyang.cn:8080/index.html 调用   http://www.nealyang.cn:9090/server.php  跨域,端口不同

https://www.nealyang.cn/index.html 调用   http://www.nealyang.cn/server.php  跨域,协议不同

localhost   调用 127.0.0.1 跨域

跨域解决方案

JSONP

原理

jsonp并非发送Ajax请求，它是利用动态创建的script标签，而script是没有同源策略限制的，可以实现跨域。具体来说就是创建script标签，并将它的src指向我们真实的服务端地址，在地址后面有一个参数例如callback=a，服务端可以解析到这个url中的callback=a，服务端返回数据时，就会调用a方法，去包裹一段数据，然后返回这段代码，相当于在前端去执行这个a方法，那么在前端发送请求之前，就要在window上去注册这个方法，那么在服务端返回这个a方法执行的时候，就可以去之前在window上定义的a方法中获得数据了。

JSONP和AJAX对比

JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。

AJAX属于同源策略，JSONP属于非同源策略(跨域请求)

JSONP优缺点

优点：简单，兼容性好，可用于解决主流浏览器的跨域数据访问的问题
缺点：仅支持get方法，具有局限性，不安全

JSONP实现流程

声明一个回调函数，其函数名(如getRemoteData)当做参数值，传递给跨域请求数据的服务端，函数形参为要获取的目标数据(服务器返回的data)。
动态创建一个<script>标签，把要跨域的API数据接口地址，赋值给<script>的src属性，同时在地址中向服务器传递该函数名(可以通过问号传参?callback=getRemoteData)。
服务器接收到请求后，进行特殊的处理，把传递进来的函数名和需要返回的数据拼接成一个字符串。
服务器把拼接好的数据通过HTTP协议返回给客户端，客户端再调用执行之前声明的回调函数(getRemoteData)，对返回的数据进行操作。

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <script>
       function test(value){
   
        alert(value)
       }
   </script>
      <script src="http://localhost:9090/?callback=test"></script>
</body>

</html>