js的跨域问题及若干解决方案

最新推荐文章于 2024-12-11 14:41:12 发布

张哈哈zhh

最新推荐文章于 2024-12-11 14:41:12 发布

阅读量1.2k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_44383261/article/details/116704338

版权

跨域

跨域也叫非同源策略，简单理解就是从一个地址去请求另一地址的资源，我们知道，url地址包含协议、域名和端口号，两个地址中的这三者只要有一个不同，就属于跨域。
我们可以在自己的电脑上模拟跨域，比如，搭建一个前后端分离的项目，前端主页的请求地址是http://120.0.0.1:8000，后端的数据接口地址设置为http://120.0.0.1:8001。显然，两个地址的端口号不一致，由此产生跨域。

解决方案

1.利用JSONP解决
html中有些标签本身就可以实现跨域，它们不存在跨域请求限制。比如：script、img、link、iframe
为什么说它们不存在跨域限制呢？比如img标签，我们的网页经常会引用一些非本地的图片，img标签的src属性注明了图片的地址，如果不是本地图片，那么显然，img的地址与我们项目的请求地址不是同一个地址，但是我们不需要对这个图片的引用做任何的跨域处理，也能请求到图片资源。同理，利用script标签引入一些js文档时（比如jQuery.js），也不需要做跨域处理。
JSONP就是利用了script标签来实现跨域。假设我们有一个前后端分离的项目，我们把http://120.0.0.1:8000当作客户端，http://120.0.0.1:8001当作服务器。于是，前端代码中写入<script src=http://127.0.0.1:8001/list?callback=func></script>
这相当于客户端向服务器发起请求，并且把本地的func函数传递给服务器。服务器接收请求之后，就会将数据返回给客户端。该数据形式为'func('+JSON.stringify(data)+')' 。也就是说，服务器端返回数据之后，func函数直接执行了。所以，func函数必须要定义为全局函数。
jQuery提供了JSONP解决跨域的方法，我们先创建一个html文件：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $.ajax({
            url: 'http://127.0.0.1:8001/list',
            method: 'get',
            dataType: 'jsonp',
            success: res => {
                console.log(res)
            }
        });
    </script>

之后，我们使用node.js创建一个js文件，作为后端

let express=require('express')
app=express();
app.listen(8001,_=>{
    console.log('OK')
})
app.get('/list',(req,res)=>{
   let {callback=Function.prototype} = req.query;//接收客户端发来的func
   let data={
       name:'zhangsan',
       age:18
   }
   res.send(`${callback}(${JSON.stringify(data)})`)
})