前端解决跨域的三种方式

最新推荐文章于 2025-04-21 18:22:48 发布

闲散客

最新推荐文章于 2025-04-21 18:22:48 发布

阅读量2k

点赞数

分类专栏：前端文章标签：跨域

本文链接：https://blog.youkuaiyun.com/weixin_44295944/article/details/98749570

版权

浏览器的同源策略导致了跨域问题，文章介绍了三种解决方式：1) JSONP利用script标签实现简单跨域；2) CORS通过设置Access-Control-Allow-Origin响应头允许指定域请求；3) 中转服务器作为代理，避免前端直接跨域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

所谓跨域问题，主要因为浏览器的安全策略是同源策略，所谓同源是指域名，协议，端口完全相同，只有同源的地址才可以相互

请求。

如存在地址http://www.example.com/login.html，通过以下对比加深同源认识

1.jsonp方式

jsonp是一种借助于 script 标签发送跨域请求的方式。

<script src="http://localhost:8080"></script>

由于上述方式无法传递参数，所以我们采用下面的方式进行跨域操作

<body>
    <button onclick="getData()">get</button>
    <script>
        function getData(){
            let JSOP=document.createElement('script');
            JSOP.src="http://localhost:8088?callback=fn";
            document.body.append(JSOP);
        }
        //函数
        function fn(data){
            console.l