http

const http = require("http");
const URL = require("url");
// 服务端（接收请求）
// 创建服务
let server = http.createServer((req, res) => {
  // req 请求(request)
  // res 响应(response)
  // 解析url
  let url = URL.parse(req.url, true);
  let pathname = url.pathname;
  console.log(url);
  let data;
  let title = "http模块";
  // 设置头部
  res.setHeader("Content-Type", "text/plain; charset=utf-8");
  // 配置路由
  if (pathname == "/") {
    res.write(
      `
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
            </head>
            <body>
                <h1>${title}</h1>
            </body>
        </html>
        `,
      "utf8"
    );
    res.end();
    return;
  }
  if (pathname == "/cart") {
    data = { name: "cart购物车 ", id: url.query.id };
  }
  if (pathname == "/goods") {
    data = { name: "goods", id: url.query.id };
  }
  // 响应结束
  res.end(JSON.stringify(data));
});
// DNS查询 --> 域名对应的IP地址
server.listen(5555, () => {
  console.log("server is start : http://localhost:5555");
});
// node http.js --inspect

// 前端 客户端 （发请求）

request

// http 模块
const http = require("http");

//发起请求的设置  例如 地址,方式
const options = {
  host: "m.maoyan.com",
  path: "/ajax/movieOnInfoList",
  method: "get"
};
// const options = {
// 	host: 'nideshop.bluej.cn',
// 	path: '/index/index',
// 	method: 'get',
// }
let request = http.request(options, response => {
  //状态码
  console.log(response.statusCode);
  var data = "";
  //
  response.on("data", chunk => {
    data += chunk;
  });
  response.on("end", () => {
    console.log(data);
  });
});

//请求结束
request.end();

跨域

后端

const http = require("http"); // http模块
const URL = require("url"); // url模块

let server = http.createServer((res, req) => {
  // 解决跨域的方法
  // 1. 加上Access-Control-Allow-Origin响应头
  // req.setHeader('Access-Control-Allow-Origin','*')
  // 允许请求时携带验证信息（cookie）
  // req.setHeader('Access-Control-Allow-Credentials',true);
  // 预检缓存时间
  // req.setHeader('Access-Control-Max-Age','1800');
  // 支持请求类型
  // req.setHeader('Access-Control-Allow-Methods','GET,POST');
  // 允许携带头部
  // req.setHeader('Access-Control-Allow-Headers','Access-Token');

  // 2. jsonp
  // 'jquery({xxx:123})'
  let url = URL.parse(res.url, true);
  console.log(url);
  // 前端传来的callback参数
  let callback = url.query.callback;
  let data = JSON.stringify({ test: 123 });
  req.write(`${callback}( ${data} ) `);
  req.end();
});

server.listen("5555");

前端

<!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>Document</title>
  </head>
  <body>
    <script>
      let xhr = new XMLHttpRequest();
      xhr.open("get", "http://localhost:5555/");
      xhr.setRequestHeader("access-token", "123456");
      xhr.addEventListener("readystatechange", e => {
        if (e.target.readyState == 4) {
          console.log(e.target);
        }
      });
      xhr.send();
    </script>

    <script>
      let script = document.createElement("script");
      // 5500 --> 5555 --> maoyan
      //      <--     <--
      script.src = "http://localhost:5555?callback=abc";
      document.body.appendChild(script);

      function abc(data) {
        console.log("jsonp", data);
      }
    </script>
  </body>
</html>