Ajax-19：クロスドメインの問題を解決する方法

JSONPとは何ですか？

jsonpは、GETリクエストのみをサポートする非公式のクロスドメインソリューションです。

JSONPはどのように機能しますか？

スクリプトタグのクロスドメイン機能を使用してリクエストを送信するimg、link、iframe、script、jsonpなど、元々Webページにクロスドメイン機能を備えているタグがいくつかあります。

• スクリプトタグを例にとると、jsonpは通常の文字列を受け入れることはできませんが、jsコードを受け入れることができます。
  

ネイティブjsonpクロスドメインケース

• ユーザーのフォーカスが入力ボックスから離れたら、jsonpリクエストを送信し、ユーザー名が既に存在することを返すと同時に、入力ボックスの境界線の色を赤に変更します。
• クライアント：

// 获取input和p标签
const input = document.querySelector('input');
const p = document.querySelector('p');

// 定义handle函数
function handle(data) {
    
    
    input.style.border = 'solid 2px red';
    p.innerHTML = data.msg;
};

// 当用户的焦点移出输入框时触发函数
input.onblur = function() {
    
    
    // 获取用户输入的值
    let user_input = this.value;

    // 创建script标签,发送jsonp请求
    const script = document.createElement('script');
    // 向script标签中添加url
    script.src = "http://localhost:9000/jsonp";
    // 将创建好的script标签加到文档对象模型中
    document.body.appendChild(script);

• サービス-ターミナル

// 测试jsonp服务
app.all('/jsonp',(request,response) => {
    
    
    const data = {
    
    
        id: 1,
        msg: '该用户名已存在'
    };
    const str = JSON.stringify(data);
    response.send(`handle(${
      
      str})`);
})