技術標籤：web前端

什麼是同源?

同源是指:協議、地址、埠三者都相同。
比如:
ajax地址: http://127.0.0.1:3000/info
頁面地址: http://127.0.0.1:3000/add
以上情況就可以說ajax請求地址與當前頁面地址同源

什麼是不同源？

協議、地址、埠三者有任意一個或多個不相同就是不同源。
比如：
ajax地址：http://127.0.0.1:3000/info
頁面地址：https://127.0.0.1:3000/add // 協議名不一致
頁面地址：http://127.123.123.1:3000/add // 地址不一致
頁面地址：https://127.0.0.1:4000/add // 埠不一致
以上情況就可以說ajax請求地址與當前頁面地址不同源

為什麼要有同源策略？

瀏覽器為了保護電腦的安全，當ajax請求地址與當前網頁地址不一致的時候，瀏覽器會禁止ajax向伺服器傳送的請求

什麼是跨域？

ajax請求地址和當前網頁地址不同源即為跨域

跨域固定報錯格式:

如何解決跨域問題？

1. CORS技術:

// 匯入 express
const express = require('express')
// 建立伺服器物件
const app = express()
// 設定埠號
const port = 3000
// 自定義中介軟體
app.use((request, response, next) => {
  // 設定允許跨域的響應頭
  response.
 
setHeader('Access-Control-Allow-Origin', '*')
  // 繼續執行後續邏輯
  next()
})

// 開啟伺服器監聽
app.listen(port, () => {
  console.log('伺服器啟動成功,埠為:', port)
})

2. JSONP技術：

• JSONP原理:
  跨域只限於傳送ajax請求,script標籤的src屬性發送的請求沒有跨域的限制。

• JSONP的工作流程：
  原生中:
  (1)在script標籤的src屬性發送請求
  (2)在url後面新增一個callback的引數,引數值為函式名
  (3)伺服器響應，呼叫函式
  jQuery中:
  

  (1)在head標籤中動態生成script標籤，使用src屬性來發送請求
  (2)伺服器響應回來之後，動態移出script標籤

• 前端部分原生寫法

<script>
      function success(backData) {
            console.log(backData)
        }
</script>
<script src="http://127.0.0.1:3000/jsonp?callback=success"></script>

• 前端部分jQuery寫法

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <button>jsonp</button>
    <script>
      $('button').click(function () {
        $.ajax({
          // 請求地址
          url: 'http://127.0.0.1:3000/jsonp',
          // 設定jsonp請求
          dataType: 'jsonp',
          success (backData) {
            console.log('backData:', backData)
          }
        })
      })
    </script>

• 後端部分

// 匯入express
const express = require('express')
// 建立伺服器物件
const app = express()
// 設定埠
const port = 3000

// 註冊路由
app.get('/jsonp', (req, res) => {
  // 獲取get請求的引數
  const { callback } = req.query
  // 返回資料
  res.send(callback + '({name:"張三"})')
})

// 開啟伺服器監聽
app.listen(port, () => {
  console.log('伺服器啟動成功,埠為:', port)
})