同源策略

同源策略（Same-Origin Policy）是一種安全策略，是指：協議、域名、端口，只有以上三點都一樣的情況下才允許訪問相同的cookie、localStorage和發送Ajax請求，以上一點不同都會出現跨域問題。

ajax跨域問題

什么是跨域？

在Ajax發請求時，需要顯示的信息一直顯示不出來，打開控制臺發現出現以下錯誤信息：
Access to XMLHttpRequest at ‘http://localhost:8000/users’ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
顯示是由于 http://localhost:5500 向另外一個服務器地址 http://127.0.0.1:8000 發送請求的時候，由于協議名稱、域名、端口中的某一項不一致造成的訪問接口失敗，也就是跨域。
跨域是產生于瀏覽器的"同源策略"，所謂同源策略是指：協議、域名、端口，只有以上三點都一樣的情況下才允許訪問相同的cookie、localStorage和發送Ajax請求，以上一點不同都會出現跨域問題。

為什么不允許跨域？

瀏覽器跨域限制是出于安全性考慮。同源策略的實施可以防止惡意腳本通過跨域請求獲取用戶的敏感數據。如果瀏覽器允許跨域請求，那么惡意網站就可以偽裝成其他網站，并竊取用戶數據，導致安全風險。如果跨域可以請求的話，很多的服務器都會受到額外的攻擊。禁止跨域是瀏覽器的行為，是瀏覽器為了網站的安全性，進行從當前的服務，訪問其它服務器的地址，瀏覽器認為這是存在風險的，因此默認會組織跨域。

跨域解決方案

1、CORS

CORS :全稱cross origin resource share （跨域資源共享）
工作原理： 服務器在返回響應報文的時候，在響應頭中設置一個允許的header
response.setHeader("Access-Control-Allow-Origin", "*");
其他響應頭：

	//設置響應頭  設置允許跨域response.setHeader("Access-Control-Allow-Origin","*");//任意頭部信息response.setHeader("Access-Control-Allow-Headers","*");//預請求結果緩存response.setHeader("Access-Control-Max-Age","delta-seconds");//跨域請求時是否攜帶驗證信息response.setHeader("Access-Control-Allow-Credentials","true");//設置請求允許的方法response.setHeader("Access-Control-Allow-Methods","*");//暴露頭部信息response.setHeader("Access-Control-Expose-Headers","*");

注意：別打錯了。。。最好復制過去，我就是因為control打多了一個 l 找了半天的錯誤。。。
例：

//1、引入express
const express = require("express");//2、創建應用對象
const app = express();//3、創建路由規則
//request是對請求報文的封裝
//response是對響應報文的封裝
//GET請求
app.get("/server", (request, response) => {//設置響應頭 設置允許跨域response.setHeader("Access-Control-Allow-Origin", "*");//設置響應response.send("HELLO AJAX");
});
//4、監聽端口啟動服務
app.listen(8000, () => {console.log("服務已經啟動，8000端口監聽中");
});

2、express自帶的中間件cors

安裝一個包cors，并配置這個cors即可，它也是express的中間件；
它的作用是自動給每一個response設置默認請求頭
這樣就不用我們自己每一個接口都要設置一次了
安裝命令 npm install cors
在服務端配置：

  var cors = require("cors");app.use(cors());

3、JSONP

有一些標簽天生具有跨域能力，比如：img、script、link、iframe
JSONP（JSON with Padding）是一種利用<script>標簽不受同源策略限制的特性進行跨域請求的方法。通過動態創建<script>標簽，將請求的數據作為回調函數的參數返回到頁面中。但是，JSONP只支持GET請求，且存在安全性和可維護性的問題。
script/img 等標簽的src屬性請求時不存在跨域問題的，但是只支持GET請求，因為get請求參數直接在url后面拼接，而post請求參數是放在請求體中

原生JSONP

• 服務端：

// jsonp.html 檢測用戶名是否存在
app.all('/jsonp-server', (request, response) => {//響應一個數據const data = { exist: 1, msg: '用戶名已存在' };let str = JSON.stringify(data); //對對象進行字符串轉換//設置響應體response.send(`handle(${str})`);
})

實現用戶名校驗（模擬一下請求js代碼的過程，并不是真的校驗），服務端的響應體是一個函數的調用，那么我們就應該有這個函數，所以首先要聲明handle函數，然后創建script標簽，利用其src屬性請求數據。

用戶名：<input type="text" id="username">
<p></p>
<script>const input = document.querySelector('input');const p = document.querySelector('p');//聲明handle函數function handle(data) {input.style.border = '1px solid #f00'; p.innerHTML = data.msg;p.style.color = 'red';}input.addEventListener('blur', function() {//獲取用戶輸入值let username = this.value;//向服務器發送請求，監測用戶名是否存在//1.創建script標簽const script = document.createElement('script');//2.設置標簽的src屬性script.src = 'http://127.0.0.1:8000/jsonp-server';//3.將script插入到文檔中document.body.appendChild(script);})
</script>

jQuery發送JSONP

服務端：

// JQuery-jsonp.html 
app.all('/jquery-jsonp-server', (request, response) => {//響應一個數據const data = { name: 'www', age: 18 };let str = JSON.stringify(data); //對對象進行字符串轉換//接收callback參數let callback = request.query.callback;//返回結果,這個callback就相當于是個函數名，相當于handleresponse.send(`${callback}(${str})`);
})

<button>點擊發送jsonp請求</button>
<div id="result"></div><script>$('button').eq(0).click(function() { //使用jquery發送jsonp請求時url后面要加參數callback=?，固定寫法//Jquery中的getJSON,省去了jsonp中handle函數的定義，靠callback代替$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){$('#result').html(`名稱：${data.name}<br>年齡：${data.age}`)})})
</script>

4、使用vscode的Live Server插件

最簡單的方法！！！
在擴展里搜索Live Server并下載，直接在需要發送請求的頁面右鍵點擊Open whit Live Server即可

注：若使用Live Server還是不成功，在vscode里打開設置–>Live Server>Settings:Proxy，把enable改為true