Node.js跨域

1.出现跨域

app.js：

const express = require("express");
const app = express();
const PORT = 3000;
app.get("/data", (req, res) => {
  res.send({ name: "张三", age: 12 }
});
app.listen(PORT, () => {
  console.log(`服务器已经启动在${PORT}上`);
});

index.html:

  
    
    
    
    
    
  
  
  按钮:测试跨域 
    
  

2.JSONP的解决方案一

app.js:

const express = require("express");
const app = express();
const PORT = 3000;
app.get("/data", (req, res) => {
  let data = { name: "张三", age: 12 };
  res.send(`callback(${JSON.stringify(data)})`);
});
app.listen(PORT, () => {
  console.log(`服务器已经启动在${PORT}上`);
});

index.html:

  
    
    
    
    
    
  
  
    
xxx的年龄是xxx
    
    

3.JSONP的解决方案二

app.js:

const express = require("express");
const app = express();
const PORT = 3000;
app.get("/data", (req, res) => {
   let data = { name: "张三", age: 12 };
   res.jsonp(data);
});
app.listen(PORT, () => {
  console.log(`服务器已经启动在${PORT}上`);
});

index.html:

  
    
    
    
    
    
  
  
    
xxx的年龄是xxx
    
    
  

4.$ajax 的JSONP的写法

app.js:

const express = require("express");
const app = express();
const PORT = 3000;
app.get("/data", (req, res) => {
   let data = { name: "张三", age: 12 };
   res.jsonp(data);
});
app.listen(PORT, () => {
  console.log(`服务器已经启动在${PORT}上`);
});

index.html:

  
    
    
    
    
    
  
  
  按钮:测试跨域 
    
  

5.后端解决跨域

app.js:

const express = require("express");
const app = express();
const PORT = 3000;
app.get("/data", (req, res) => {
  let data = { name: "张三", age: 12 };
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.send(data);
});
app.listen(PORT, () => {
  console.log(`服务器已经启动在${PORT}上`);
});

const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
const PORT = 3000;
app.get("/data", (req, res) => {
  let data = { name: "张三", age: 12 };
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.send(data);
});
app.listen(PORT, () => {
  console.log(`服务器已经启动在${PORT}上`);
});

 index.html:

  
    
    
    
    
    
  
  
    
xxx的年龄是xxx
    按钮:测试跨域