ajax請求后臺數(shù)據(jù)，必須要遵循同源策略：協(xié)議名、主機名、端口號必須要一致。很多情況下，后端項目和前端項目并沒有部署到同一個服務(wù)器，即便部署到了同一個服務(wù)器，由于是兩個項目，端口號也會不一樣，此時前端項目向后端項目請求資源，就違反了同源策略。此時需要后臺項目允許跨域。

前臺服務(wù)器向后臺服務(wù)器請求數(shù)據(jù)，通過代理服務(wù)器。前臺服務(wù)器向代理服務(wù)器發(fā)送ajax請求，代理服務(wù)器采用原生http方式請求后臺服務(wù)器

// 導(dǎo)入express
let express = require("express");
// 創(chuàng)建一個服務(wù)器對象
let app = express();
// 開啟一個端口號
app.listen(5566, () => {
  console.log("服務(wù)器成功開啟！端口號5566");
});

//配置中間件，攔截所有的請求
app.use((req, res, next) => {
  //允許跨域
  // res.setHeader("Access-Control-Allow-Origin", "*");
  next();
});

//學(xué)生數(shù)組
let stus = [
  {
    no: "1001",
    name: "張三",
    age: 20,
    sex: "男",
  },
  {
    no: "1002",
    name: "李四",
    age: 22,
    sex: "女",
  },
  {
    no: "1003",
    name: "王五",
    age: 24,
    sex: "男",
  },
]

// 定義一個get請求接口
app.get("/list", (req, res) => {
  res.send(stus);
});

// 導(dǎo)入express
let express = require("express");
// 創(chuàng)建一個服務(wù)器對象
let app = express();
// 開啟一個端口號
app.listen(7788, () => {
  console.log("服務(wù)器成功開啟！端口號7788");
});

//配置中間件，攔截所有的請求
app.use((req, res, next) => {
  //允許跨域
  // res.setHeader("Access-Control-Allow-Origin", "*");
  next();
});

//汽車數(shù)組
let cars = [
    {
      id: "1001",
      name: "奔馳"
    },
    {
      id: "1002",
      name: "寶馬"
    },
    {
      id: "1003",
      name: "奧迪"
    },
  ]

// 定義一個get請求接口
app.get("/list", (req, res) => {
  res.send(cars);
});

配置代理服務(wù)器

module.exports = {
    //取消eslint語法檢查
    lintOnSave:false,
    //devServer是腳手架中的開發(fā)服務(wù)器
    devServer:{
        //配置主機名
        host:'localhost',
        //配置端口號
        port:'8080',
        //在開發(fā)服務(wù)器中，配置一個代理服務(wù)器地址。
        //注意：在開發(fā)階段，通過向當前開發(fā)服務(wù)器發(fā)送ajax請求，當前服務(wù)器會將請求轉(zhuǎn)發(fā)給配置的代理服務(wù)器地址。
        // proxy:'http://localhost:5566'
        // 配置多個代理服務(wù)器地址
        proxy:{
            // /stu是前綴
            '/stu':{
                //代理的地址
                target:'http://localhost:5566',
                //路徑重寫，因為向真實的后臺發(fā)送請求時，不需要加前綴
                pathRewrite:{
                    //將地址中，/stu替換成空
                    '^/stu':''
                }
            },
            '/car':{
                target:'http://localhost:7788',
                pathRewrite:{
                    '^/car':''
                }
            }
        }
    },
}