AJAX——跨域问题的解决方法

文章目录

      • AJAX——跨域问题的解决方法
        • 同源策略
        • JSONP
        • CORS

AJAX——跨域问题的解决方法

在了解跨域时我们先要了解什么时同源策略

同源策略

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

解决跨问的方法有两种:JSONP和CORS:

JSONP
  1. JSONP 是什么
    JSONP(JSON with Padding),是一个非官方的跨域解决方案,纯粹凭借程序员的聪明
    才智开发出来,只支持 get 请求。
  2. JSONP 怎么工作的?
    在网页有一些标签天生具有跨域能力,比如:img link iframe script。
    JSONP 就是利用 script 标签的跨域能力来发送请求的。
    我们以下面的案例来解释:
    后端代码
app.all('/check-username', (request, response)=>{
    //设置响应
    response.setHeader('Access-Control-Allow-Origin', '*');
     //响应头
     response.setHeader('Access-Control-Allow-Headers', '*');
     const data={
         exit:1,
         msg:'用户已存在'
     }
     let str=JSON.stringify(data)
     response.end(`handle(${str})`);
});

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
</head>
<body>
    用户名: <input type="text" id="username">
    <p></p>
    <script>
        //获取 input 元素
        const input = document.querySelector('input');
        const p = document.querySelector('p');
        
        //声明 handle 函数
        function handle(data){
            input.style.border = "solid 1px #f00";
            //修改 p 标签的提示文本
            p.innerHTML = data.msg;
        }

        //绑定事件
        input.onblur = function(){
            //获取用户的输入值
            let username = this.value;
            //向服务器端发送请求 检测用户名是否存在
            //1. 创建 script 标签
            const script = document.createElement('script');
            //2. 设置标签的 src 属性
            script.src = 'http://127.0.0.1:8000/check-username';
            //3. 将 script 插入到文档中
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

AJAX——跨域问题的解决方法_第1张图片
当input标签失去焦点时,就会向服务器端发送请求 检测用户名是否存在,然后我们创建 script 标签,设置标签的 src 属性后,将script标签存入body中,后端接收到请求后,就会回送
handle(${str}) 给前端,前端就会执行这行代码,结果显示如下:
AJAX——跨域问题的解决方法_第2张图片

CORS

CORS 文档地址:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

  1. CORS 是什么?
    CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS 是官方的跨域解决方
    案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持
    get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些
    源站通过浏览器有权限访问哪些资源
  2. CORS 怎么工作的?
    CORS 是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应
    以后就会对响应放行。
  3. CORS 的使用
    主要是服务器端的设置:
router.get("/testAJAX" , function (req , res) {
//通过 res 来设置响应头,来允许跨域请求
//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
res.set("Access-Control-Allow-Origin","*");
res.send("testAJAX 返回的响应");
});

你可能感兴趣的:(AJAX,js,web,ajax跨域问题)