JSONP如何解决跨域

116 阅读1分钟

服务端代码

const http = require("http");
const fs = require("fs");
const url = require("url");
const port = process.env.PORT || 3000;
const server = http.createServer((req, res) => {
  const path = url.parse(req.url).pathname;
  if (path === "/") {
    let string = fs.readFileSync("./index.html", "utf8");
    res.setHeader("Content-Type", "text/html");
    res.write(string);
    res.end();
  }
  if (path === "/jsonp") {
    const query = url.parse(req.url).query;
    res.setHeader("Content-Type", "application/javascript");
    res.statusCode = 200;
    res.write(`${query.split('=')[1]}.call(undefined,{name:'yanjunyue'})`);
    res.end();
  } 
});

server.listen(port);
console.log(`正常监听,服务运行在:${port}`);

客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title></title>
</head>
<body>
  <button id="button">获取数据</button>
  <script>
    	let button = document.getElementById('button');
        button.addEventListener('click', e => {
          let script = document.createElement('script');
          window.abc= function (data) {
              console.log(data)
           }
          script.src = '/jsonp?callback=abc';

          document.body.appendChild(script);
        });
  </script>
</body>
</html>