技術標籤：Ajax

1.同源策略（Same-Origin Policy）

（當前頁面的url 和目標請求的url不一樣）
-是瀏覽器的一種安全策略
-所謂同源就是同一個源頭。
-官方同源：協議、埠號、域名必須完全相同
-違背同源策略就是跨域
（當前頁面的url 和目標請求的url不一樣）

2.如何解決跨域

-jsonp,jsonp是非官方的跨域解決方案，只支援get請求。它藉助script標籤的跨域能力來發送請求的
-jsonp的一個例子：
當輸入字元進去的時候input邊框變紅色，並且在input框下邊的p標籤裡顯示已存在

傳送請求後

  <form action=""
 
>
    請輸入使用者名稱： <input id="username" type="text">
    <p></p>
  </form>
  <script>
    const username = document.querySelector('input')
    const p = document.querySelector('p')

    handle = (data) => {
      username.style.border = "solid 1px #f00"
 

      p.innerHTML = data.msg
    }

    username.onblur = () => {//喪失焦點
      //獲取使用者輸入值
      let username = this.value;//獲取輸入值的一個屬性api
      //向服務端傳送請求 檢查使用者名稱是否存在
      //第一步：建立一個script標籤
      const script = document.createElement('script')
      //第二步 設定src屬性
      script.src = 'http://127.0.0.1:8000/jsonp-ajax'
 
;
      //第三步 講script插入到文件中，如果不插入文件中，瀏覽器不會向遠端傳送請求的
      document.body.appendChild(script);
    }
  </script>
</body>

服務端程式碼:(這邊只是返回存在，沒有實際資料庫)

//使用者名稱檢測
app.all('/jsonp-ajax', (request, response) => {
  const data = {
    exist: 1,
    msg: '使用者名稱已經存在'
  };
  let str = JSON.stringify(data)
  response.end(`handle(${str})`) //這裡返回的函式在頁面必須有宣告
})

除了jsonp還有一種官方的cors - 就是在服務端設定一個允許跨域的引數，

app.get('/getServer', (request, response) => {
  //設定響應頭  響應體名字Access-Control-All-Origin ， *號是設定允許跨域 
  //Access-Control-Allow-Headers * 說你的頭資訊是可以隨意設定
   //Access-Control-Allow-Method* 說你的請求方法隨意
  response.setHeader('Access-Control-Allow-Origin', '*')
    response.setHeader('Access-Control-Allow-Headers', '*')
    response.setHeader('Access-Control-Allow-Method', '*')
  //設定響應體

})