如何解决跨域问题

一、跨域问题是什么？

同源策略 (Same-Origin Policy) 最早由 Netscape 公司提出，是浏览器的一种安全策略。
同源：协议、域名、端口号必须完全相同
跨域：违背同源策略就是跨域。

二、解决方法

JSONP

JSONP 是什么？
- JSONP (JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。
JSONP 怎么工作的？
- 在网页有一些标签天生具有跨域能力，比如：img、link、iframe、script。JSONP 就是利用 script 标签的跨域能力来发送请求的。
JSONP 的使用

1. 创建 script 标签
2. 设置标签的 src 属性
3. 将 script 插入到文档中
4. 服务器中的处理

jQuery 中的 JSONP

前端页面的代码

<!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>
    <style>
        #result{
            width: 300px;
            height: 100px;
            border: solid 1px #089;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result">

    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){
                $('#result').html(`
                    名称：${data.name}<br>
                    校区：${data.city}
                `)
            })
        })
    </script>
</body>
</html>

View Code

服务器端路由的处理

CORS

CORS 是什么？
- CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
CORS 是怎么工作的？
- CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
CORS 的使用

前端页面的代码

<!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>CORS</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button')

        btn.onclick = function(){
            // 1.创建对象
            const x = new XMLHttpRequest()
            // 2.初始化设置
            x.open('get','http://127.0.0.1:8000/cors-server')
            // 3.发送
            x.send()
            // 4.绑定事件
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    if(x.status >= 200 && x.status < 300){
                        // 输出响应体
                        result.innerHTML = x.response
                    }
                }
            }
        }
    </script>
</body>
</html>

View Code

- 服务器端路由的处理

posted @ 2022-08-19 13:36 宋亚洁洁洁阅读(140) 评论(0) 收藏举报

刷新页面返回顶部

如何解决跨域问题

公告