[AJAX] axios fetch クロスドメイン (2)

1.アクシオス

1.1 アクシオスとは？

フロントエンドで最も人気のある ajax リクエストライブラリ
react/vue は axios を使用して ajax リクエストを送信することを公式に推奨しています
ドキュメンテーション：https://github.com/axios/axiosopen

1.2 axiosの特徴

xhr + promise に基づく非同期 ajax リクエストライブラリ
ブラウザとノードの両方を使用できます
リクエスト/レスポンスインターセプターのサポート
サポートリクエストのキャンセル
リクエスト/レスポンスのデータ変換
複数のリクエストをバッチ処理する

1.3 Axios共通構文

axios(config): あらゆるタイプのリクエストを送信するための一般的/最も重要な方法

axios(url[, config]): get リクエストを送信する URL のみを指定できます

axios.request(config): axios(config) と同等

axios.get(url[, config]): get リクエストを送信する

axios.delete(url[, config]): 削除リクエストを送信

axios.post(url[, data, config]): 投稿リクエストを送信する

axios.put(url[, data, config]): put リクエストを送信

axios.defaults.xxx: リクエストのデフォルトのグローバル構成 (method\baseURL\params\timeout…)

axios.interceptors.request.use(): リクエストインターセプターを追加

axios.interceptors.response.use(): 応答インターセプターを追加

axios.create([config]): 新しい axios を作成します (以下の機能はありません)

axios.Cancel(): キャンセルリクエストの作成に使用されるエラーオブジェクト

axios.CancelToken(): キャンセルリクエストの作成に使用されるトークンオブジェクト

axios.isCancel(): リクエストをキャンセルするのはエラーですか

axios.all(promises): 複数の非同期リクエストをバッチで実行するために使用されます

axios.spread(): 成功したすべてのデータを受け取るコールバック関数を指定するために使用されるメソッド

画像-20220625194840070

1.4 使用

構成オブジェクトで一般的に使用される構成アイテム

{
    
    
  // 路径url
  url: '/user',

  // 请求方法，默认get
  method: 'get', 

  //基础url，最终请求的url是 baseURL+url拼接，所以再全局设置默认，可以使得发送请求时的url变得简洁
  baseURL: 'https://some-domain.com/api/',

  //设置请求头
  headers: {
    
    'X-Requested-With': 'XMLHttpRequest'},

  //设置请求url的query参数，可以使得url简洁。
  //比如url是https://some-domain.com/api/user  然后params如下设置，那么最终的url是：
  //https://some-domain.com/api/user?ID=12345&name=Jack
  params: {
    
    
    ID: 12345,
    name:"Jack"
  },


 //设置请求体
  data: {
    
    
    firstName: 'Fred'
  },

  //设置请求的另外一种格式，不过这个是直接设置字符串的
  data: 'Country=Brasil&City=Belo Horizonte',

 //请求超时，单位毫秒，默认0，不超时。
  timeout: 1000,

  //响应数据类型，默认json
  responseType: 'json', 

  //响应数据的编码规则，默认utf-8
  responseEncoding: 'utf8',

  //响应体的最大长度 
  maxContentLength: 2000,

  // 请求体的最大长度
  maxBodyLength: 2000,

  //设置响应状态码为多少时是成功，调用resolve，否则调用reject失败
  //默认是大于等于200，小于300
  validateStatus: function (status) {
    
    
    return status >= 200 && status < 300; 
  }

コード

    <button id="btn1">发送get请求</button> <br><br>
    <button id="btn2">发送post请求</button><br><br>
    <button id="btn3">发送put请求</button><br><br>
    <button id="btn4">发送delete请求</button>

    <hr>

    <div>其他发送请求的api:</div><br><br>
    <button id="btn5">发送get请求1</button> <br><br>
    <button id="btn6">发送post请求1</button><br><br>
    <button id="btn7">发送put请求1</button><br><br>
    <button id="btn8">发送delete请求1</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    //发送get
    document.getElementById("btn1").onclick = function(){
    
    
       axios({
    
    
        method:"GET",
        url:"http://localhost:3000/posts/1"
       }).then(response=>{
    
    
           console.log(response);
       })
    };

    //发送post
    document.getElementById("btn2").onclick = function(){
    
    
       axios({
    
    
        method:"POST",
        url:"http://localhost:3000/posts",
        data:{
    
    
            title:"axios学习",
            author:"Yehaocong"
        }
       }).then(response=>{
    
    
           console.log(response);
       })
    };
    //发送put
    document.getElementById("btn3").onclick = function(){
    
    
       axios({
    
    
        method:"PUT",
        url:"http://localhost:3000/posts/2",
        data:{
    
    
            title:"axios学习",
            author:"Liaoxiaoyan"
        }
       }).then(response=>{
    
    
           console.log(response);
       })
    };
    document.getElementById("btn4").onclick = function(){
    
    
       axios({
    
    
        method:"DELETE",
        url:"http://localhost:3000/posts/2",
       }).then(response=>{
    
    
           console.log(response);
       })
    };

    //其他发送请求的api
    document.getElementById("btn5").onclick = function(){
    
    
        //发送get,使用get，第一个参数时url，第二个参数时config配置对象
       axios.get("http://localhost:3000/posts/1")
       .then(response=>{
    
    
           console.log(response);
       })
    };

    //发送post
    document.getElementById("btn6").onclick = function(){
    
    
        //发送post请求，第一个参数时url，第二个参数时请求体，第三个参数时config配置对象
        axios.post("http://localhost:3000/posts",
        {
    
    title:"axios学习2",
            author:"Yehaocong2"})
            .then(response=>{
    
    
           console.log(response);
       })
    };
    //发送put,
    document.getElementById("btn7").onclick = function(){
    
    
        //发送put,接收三个参数，url  请求体 、 config配置对象
       axios.put("http://localhost:3000/posts/2",{
    
    title:"axios学习",
            author:"Liaoxiaoyan"})
       .then(response=>{
    
    
           console.log(response);
       })
    };
    document.getElementById("btn8").onclick = function(){
    
    
        //发送delete请求，接收2个参数， url config配置对象
        axios.delete("http://localhost:3000/posts/3")
       .then(response=>{
    
    
           console.log(response);
       })
    };

画像-20220625195401372

デフォルトの割り当て

baseURL、タイムアウトなど、複数の構成が異なるリクエストで繰り返されるのを避けるために、グローバルなデフォルト構成を設定できます。baseURL をここに設定します。

 axios.defaults.baseURL="http://localhost:3000";

 //因为上面配置了baseURL，所以我们之后的请求只需要配置url不用像之前那样的全路径
 axios.get("/posts/1")
.then(response=>{
    
    
    console.log(response);
})

1.5 新しい axios オブジェクトを作成する

つまり、各新しい axios には独自の構成の新しい axios がありますが、要求をキャンセルして要求をバッチで送信する方法はなく、他のすべての構文は一貫しています。この構文を設計する理由?

要件: プロジェクト内の一部のインターフェースで必要とされる構成が、他のインターフェースで必要とされる構成とは異なり、その対処方法 (たとえば、指定する必要のある baseURL が複数ある場合)

解決策: それぞれ独自の構成を持つ 2 つの新しい axios を作成し、異なる要件を持つインターフェース要求に適用します。

const instance = axios.create({
    
     // instance是函数类型
    baseURL: 'http://localhost:3000'
})
// 使用instance发Ajax请求
instance({
    
    
    url: '/posts'
})
instance.get('/posts')

1.6 インターセプター

リクエストインターセプター（リクエストを送信する前に、リクエストのパラメーターと内容を処理および検出する関数を使用します。リクエストに問題がある場合は、直接インターセプトできます->キャンセル、後入れ先実行=後続リクエストインターセプターが最初に実行されます)

応答インターセプター(応答の結果を前処理し、最初に実行 = 前の応答インターセプターが最初に実行されます)

1) リクエストインターセプター:

実際にリクエストを送信する前に実行されるコールバック関数
リクエストは、特定の処理のために検査または構成できます
コールバック関数が失敗しました。渡されたデフォルトはエラーです
成功したコールバック関数。デフォルトで渡されるのは config です (また、そうである必要があります)

2) 応答インターセプター

リクエストがレスポンスを受け取った後に実行されるコールバック関数
応答データに対して特定の処理を実行できます
コールバック関数が成功しました。デフォルトで渡されるのは response です
コールバック関数が失敗しました。渡されたデフォルトはエラーです

3) リクエストコンバータ：リクエストヘッダとリクエストボディのデータを具体的に処理する機能

応答コンバーター: 応答本文の json 文字列を解析して js オブジェクトまたは配列にする関数

説明: axios() を呼び出しても ajax リクエストはすぐには送信されず、より長いプロセスを経る必要があります
プロセス: リクエストインターセプタ 2 => リクエストインターセプタ 1 => ajax リクエストの送信 => レスポンスインターセプタ 1 => レスポンスインターセプタ 2 => コールバックのリクエスト
注: このプロセスは promise によって連鎖され、リクエストインターセプターは構成を渡し、レスポンスインターセプターはレスポンスを渡します。

コード

script>
      //设置一个请求拦截器，在请求拦截器中可以对请求参数进行修改
      //config：配置对象
      axios.interceptors.request.use(
        function (config) {
    
    
          console.log("请求拦截器 成功 1号");
          // config.headers.test = "I am only a header!";
          //修改 config 中的参数
          config.params = {
    
     a: 100 };
          return config;
        },
        error => {
    
    
          console.log("请求拦截器 失败 1号");
          return Promise.reject(error);
        }
      );

      axios.interceptors.request.use(
        function (config) {
    
    
          config.timeout = 5000;
          console.log("请求拦截器 成功 2号");
          // config.headers.test = "I am only a header!";
          //修改 config 中的参数
          config.timeout = 2000;
          return config;
        },
        error => {
    
    
          console.log("请求拦截器 失败 2号");
          return Promise.reject(error);
        }
      );

      //设置一个响应拦截器，可以对响应结果做一些处理
      axios.interceptors.response.use(
        function (response) {
    
    
          console.log("响应拦截器 成功 1号");
            //返回到请求回调时，只要data数据
             return response.data;
        },
        function (error) {
    
    
          console.log("响应拦截器 失败 1号");
          return Promise.reject(error);
        }
      );

      //设置一个响应拦截器
      axios.interceptors.response.use(
        function (response) {
    
    
          console.log("响应拦截器 成功 2号");
          return response;
        },
        function (error) {
    
    
          console.log("响应拦截器 失败 2号");
          return Promise.reject(error);
        }
      );

      //发送请求
      axios({
    
    
        method: "GET",
        url: "http://localhost:3000/posts",
      })
        .then((response) => {
    
    
          console.log("自定义回调处理成功的结果");
          //console.log(response);
        })
        .catch((reason) => {
    
    
          console.log(reason);
        });
    </script>

画像-20220625200618691

1.7 キャンセル申請

バージョン 0.22 より前で使用でき、0.22 以降は非推奨です。

  <body>
    <div class="container">
      <h1 class="page-header">axios取消请求</h1>
      <button class="btn btn-primary">发送请求</button>
      <button class="btn btn-warning">取消请求</button>
    </div>
  </body>
  <script>
    //获取按钮
    const btns = document.querySelectorAll("button");
    //2.声明一个全局变量
    let cancel = null;
    //发送请求
    btns[0].onclick = () => {
    
    
      //检测上一次请求是否已经完成
      if (cancel !== null) {
    
    
        //则代表上一次请求还未取消，故直接取消上一次请求
        cancel();
      }
      axios({
    
    
        method: "GET",
        url: "http://localhost:3000/posts",
        //1.添加配置对象的属性
        cancelToken: new axios.CancelToken((c) => {
    
    
          //3.将c的值赋值给cancel
          cancel = c;
        }),
      }).then((response) => {
    
    
        console.log(response);
        //当请求执行完后 将cancel进行初始化设置
        cancel = null;
      });
    };

    //取消请求
    btns[1].onclick = () => {
    
    
      cancel();
    };
  </script>

0.22 新方式

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
 let btn = document.querySelectorAll('button');
const controller = new AbortController();
      btn[0].onclick = function () {
    
    
          axios( {
    
    
              url:'https://api.uomg.com/api/get.kg?songurl=https://node.kg.qq.com/play?s=YaCv8EYfJunVWYcH',
              signal: controller.signal
              }).then(function(response) {
    
    
                  console.log(response);
              });
      }

      btn[1].onclick = function () {
    
    
        controller.abort()
      }

1.8 vue で axios をカプセル化する

requests.js
//对于axios进行二次封装
import axios from 'axios';
//获取仓库:存储数据
import store from '@/store';

//axios.create方法执行,其实返回一个axios和request一样的
let requests = axios.create({
    
    
  //基础路径,发请求URL携带api【发现:真实服务器接口都携带/api】
  baseURL: '/api',
  //超时的设置
  timeout: 5000,
});

//请求拦截器:将来项目中【N个请求】，只要发请求,会触发请求拦截器!!!
requests.interceptors.request.use(config => {
    
    
  //请求拦截器:请求头【header】,请求头能否给服务器携带参数
  //请求拦截器：其实项目中还有一个重要的作用,给服务器携带请求们的公共的参数
  if (store.state.detail.nanoid_token) config.headers.userTempId = store.state.detail.nanoid_token;
  if (store.state.user.token) config.headers.token = store.state.user.token;

  return config;
});

//响应拦截器：请求数据返回会执行
requests.interceptors.response.use(
  res => {
    
    
    //res:实质就是项目中发请求、服务器返回的数据
    return res.data;
  },
  err => {
    
    
    //温馨提示:某一天发请求,请求失败,请求失败的信息打印出来
    alert(err.message);
    //终止Promise链
    return new Promise();
  }
);

//最后需要暴露:暴露的是添加新的功能的axios,即为requests
export default requests;

使用

import requests from '@/api/requests';
//注册的接口
export const reqRegister = data =>
  requests({
    
     url: `/user/passport/register`, method: 'post', data });

2.フェッチ

2.1 XMLHttpRequest の欠点

ブラウザは、ネイティブ AJAX 実装クラス XMLHttpRequest を提供します. このクラスインスタンスに基づいて、Web ページ上のサーバーに AJAX リクエストを送信できます.

しかし、XMLHttpRequest の設計は、主に次の点で完全ではありません。

HTTP リクエストとレスポンスが XMLHttpRequest インスタンスに結合されているため、構造が単純ではありません
イベントコールバックを使用して HTTP 応答を取得すると、コールバック地獄につながる可能性があります
HTTP 応答データが大きすぎると、多くのメモリが占有されます
最後のポイントは、AJAX を実装するための XMLHttpRequest の手順が細分化されすぎていることです。

2.2 フェッチの利点

XMLHttpRequest と同様に、Fetch もブラウザーにネイティブであり、AJAX 要求の送信に使用されます。

フェッチ

画像-20220624220655195

XMLHttpRequestの短所を補う目的でXMLHttpRequestの後に生まれたので、XMLHttpRequestの短所が長所となります。

シンプルな構文と明確な構造
非同期 HTTP 応答を取得する Promise をサポート
HTTP 応答はストリーミングをサポートし、メモリに優しい

Fetch は関数として設計されており、XMLHttpRequest のようなインスタンスを作成せずに、fetch 関数を呼び出すことで AJAX を開始し、xhr インスタンスに基づいて AJAX を開始できます。

fetch('http://localhost:3000/test') // fetch函数调用即发起AJAX

fetch 関数は Promise オブジェクトを返し、Promise オブジェクトの結果値は HTTP 応答です

fetch('http://localhost:3000/test').then(response => {
    
     // fetch函数返回值是一个Promise类型对象
    console.log(response) // 该Promise对象的结果值response就是HTTP响应

fetch 関数が返す Promise オブジェクトの結果値の HTTP レスポンスはストリーミング的に取得されるため、HTTP レスポンスのデータが大きくてもメモリを占有しません。

2.3 fetch リクエストとレスポンス

2.3.1 リクエスト

fetch(url,options).then((response)=>{
    
    
//处理http响应
},(error)=>{
    
    
//处理错误
})

url: ネットワーク要求を送信するアドレスです。

オプション: リクエストパラメータの送信、

body - http リクエストパラメータ
mode - 要求されたモード
- cors: クロスオリジンリクエストを許可するデフォルト値。
- same-origin: 同一オリジンのリクエストのみが許可されます。
- no-cors: リクエストメソッドは GET、POST、および HEAD に限定され、いくつかの単純なヘッダーしか使用できず、クロスドメインの複雑なヘッダーを追加することはできません。これは、フォームを送信して送信できるリクエストに相当します。
cache - ユーザー指定のキャッシュ。
method - リクエストメソッド、デフォルト GET
シグナル - フェッチをキャンセルするために使用されます
headers - HTTP リクエストヘッダーの設定
キープアライブ - ページがアンロードされると、ブラウザにバックグラウンドで接続を維持し、データの送信を続けるように指示します。
credentials - Cookie を送信するかどうか
- same-origin: デフォルト値では、同一オリジンのリクエストに対して Cookie が送信され、クロスオリジンのリクエストに対しては送信されません。
- include: Cookie は、同一オリジンリクエストまたはクロスドメインリクエストに関係なく、常に送信されます。
- omit: 送信しないでください。
referrer -fetch()リクエストの設定に使用されるrefererヘッダー
referrerPolicy - 設定に使用
```
Referer
```
ヘッダールール
- no-referrer-when-downgrade: デフォルト値で、HTTPS ページから HTTP リソースを要求する場合を除き、常に Referer ヘッダーを送信します。
- no-referrer: Referer ヘッダーを送信しません。
- origin: Referer ヘッダーには、フルパスではなく、ドメイン名のみが含まれます。
- origin-when-cross-origin: 同一オリジンリクエストの Referer ヘッダーにはフルパスが含まれ、クロスオリジンリクエストにはドメイン名のみが含まれます。
- same-origin: クロスオリジンリクエストのリファラーは送信されず、同一オリジンリクエストが送信されます。
- strict-origin: Referer ヘッダーにはドメイン名のみが含まれ、HTTPS ページが HTTP リソースを要求する場合、Referer ヘッダーは送信されません。
- strict-origin-when-cross-origin: Referer ヘッダーには、同一オリジンリクエストのフルパスと、クロスオリジンリクエストのドメイン名のみが含まれます。
- このヘッダーは、HTTPS ページが HTTP リソースを要求する場合には送信されません。
- unsafe-url: 何があっても常に Referer ヘッダーを送信します。

fetch('http://localhost:3000/test',{
    
    
    method: 'post',
    headers: {
    
    
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
    
    
        name: 'qfc',
        age: 18
    })
}).then(res => {
    
    
    console.log(res)
})

画像-20220624222137163

注目すべきは、Request オブジェクトの body プロパティです。

「name=qfc&age=18」などのクエリパラメータ文字列
'{"name":"qfc", "age": 18}' などのテキスト文字列
FormData オブジェクト
ブロブオブジェクト
ReadableStream オブジェクト
BufferSource オブジェクト

2.3.2 レスポンス

フェッチ要求が成功すると、応答オブジェクトは次の図のようになります。

画像-20220624221326446

status - 100 から 599 の範囲の HTTP ステータスコード
statusText - サーバーから返されたステータスのテキスト記述
ok - ブール値を返します。ステータスコードが 2 で始まる場合は true、それ以外の場合は false
headers - 応答ヘッダー
body - 応答本文。レスポンスボディのデータは、タイプに従って処理されます。
type - リクエストタイプを返します。
- basic: "Set-Cookie" と "Set-Cookie2" 以外のすべてのヘッダーを含む、標準値、同一オリジンの応答。
- cors: Response 有効なクロスオリジンリクエストを受信しました。
- error: Network error. エラーを説明する有用な情報はありません。応答のステータスは 0 で、ヘッダーは空で不変です。Response.error() から取得した応答のタイプ。
- opaque: "no-cors" クロスオリジンリクエストに応答します。
- redirected - Response がリダイレクトからのものかどうかを示すブール値を返します。そうであれば、その URL リストには複数のエントリが含まれます。
url: HTTP リクエスト URL

その中で気をつけなければならないのは、body 属性の値が読み取り可能なストリームであるため、body の内容を直接取得することはできず、読み取り可能なストリームからコンテンツを読み取る必要があり、読み取り可能なストリーム内のコンテンツを読み取る必要があることです。ストリームも非同期操作です。応答を考慮して、次のインスタンスメソッドを提供し、本文が読み取り可能なストリームのコンテンツを非同期に取得します。

json() は本文の内容を JSON オブジェクトとして読み取ります
text() は、本文の内容を通常のテキスト文字列として読み取ります
formData() は本文の内容を FormData オブジェクトとして読み取ります
blob() は、本文の内容を Blob オブジェクトとして読み取ります
arrayBuffer() は、本文のコンテンツを ArrayBuffer オブジェクトとして読み取ります

上記のメソッドはすべて Promise オブジェクトを返し、Promise オブジェクトの結果の値は、それらが読み取って対応する形式に変換したデータです。

fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
    
    
    //请求方法
    method: 'POST',
    //请求头
    headers: {
    
    
        name:'atguigu'
    },
    //请求体
    body: 'username=admin&password=admin'
}).then(response => {
    
    
    // return response.text();
    return response.json();
}).then(response=>{
    
    
    console.log(response);
});

上記のコードテストにより、response.json() によって返される Promise の結果値が実際の本文の内容であり、JSON オブジェクトに自動的に変換されることがわかります。

2.4 GET と POST

2.1.1 取得

fetch(`http://localhost:80/fetch.html?user=${user.value}&pas=${pas.value}`,{
 method:'GET'
}).then(response=>{
 console.log('响应',response)
})

2.1.2 投稿

fetch(`http://localhost:80/fetch`,{
    
    
 method:'POST',
 headers:{
    
    
  'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
 },
 body:`user=${
      
      user.value}&pas=${
      
      pas.value}`
 }).then(response=>{
    
    
  console.log('响应',response)
})

json データを送信する場合は、json を文字列に変換する必要があります。好き

fetch(`http://localhost:80/fetch`,{
    
    
 method:'POST',
    headers: {
    
    
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
    
    
        name: 'qfc',
        age: 18
    }).then(response=>{
    
    
  console.log('响应',response)
})

フォームデータが送信された場合は、次のように formData を使用して変換します。

body:new FormData(form)

次のように、アップロードファイルをフォーム全体に含めて一緒に送信できます。

const input = document.querySelector('input[type="file"]');

const data = new FormData();
data.append('file', input.files[0]);
data.append('user', 'foo');

fetch('/avatars', {
    
    
  method: 'POST',
  body: data
});

2.5 fetch はデフォルトで Cookie を持ちません

credentials:'include'Cookie を渡すときは、現在の Cookie が xhr のようにリクエストに含まれるように、パラメーターに追加する必要があります。

2.6 例外処理

fetch は xhr とは異なり、xhr にはキャンセルやエラーなどの独自のメソッドがあるため、サーバーが 4xx または 5xx を返す場合、エラーはスローされず、手動で処理する必要があります。応答。

3.クロスドメイン

3.1 同一オリジンポリシー

Same-Origin Policy (Same-Origin Policy) は、Netscape によって最初に提案された、ブラウザーのセキュリティポリシーです。
同じオリジン: プロトコル、ドメイン名、ポート番号は完全に同じでなければなりません
クロスドメイン: 同一生成元ポリシーの違反はクロスドメインです

3.2 クロスドメインの解決方法

3.2.1 JSONP

jsonp は get リクエストのみをサポートし、post リクエストはサポートしません

1) JSONPとは

JSONP (JSON with Padding) は非公式のクロスドメインソリューションであり、純粋にプログラマーの創意工夫によって開発され、get リクエストのみをサポートします。

2) JSONP はどのように機能しますか?

Web ページの一部のタグは、次のように本質的にクロスドメインに対応しています: img リンク iframe スクリプト。JSONP は、スクリプトタグのクロスドメイン機能を使用してリクエストを送信します。

3) JSONPの利用

htmlコード

//1. 创建 script 标签
const script = document.createElement('script');
//2. 设置标签的 src 属性
script.src = 'http://127.0.0.1:8000/check-username?callback=abc';
//3. 将script 添加到body 中
document.body.appendChild(script);
function abc(data) {
    
    
    alert(data.name);
};

バックエンドコード

app.get("/check-username" , function (req , res) {
    
    
    var callback = req.query.callback;
    const data = {
    
    
        name: '孙悟空'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果(一段可执行的JavaScript代码)
    response.end(`handle(${
      
      str})`);
});

3.2.2 CORS

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

CORSとは？CORS (クロスオリジンリソース共有)、クロスドメインリソース共有。CORSは正式なクロスドメインソリューションであり、クライアント側で特別な操作を必要とせず、サーバー内ですべて処理され、getリクエストとpostリクエストをサポートしているのが特徴です。HTTP ヘッダーフィールドの新しいセットがクロスオリジンリソース共有標準に追加されました。これにより、サーバーは、どのオリジンサイトがブラウザーを通じてどのリソースにアクセスする許可を持っているかを宣言できます。
CORS はどのように機能しますか? CORS は、リクエストがクロスドメインを許可するレスポンスヘッダーを設定することによってブラウザに通知し、ブラウザはレスポンスを受信した後にレスポンスを解放します。
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 返回的响应");
});