同源策略

同源策略 | MDN
同一个来源—协议、域名、端口号 必须相同。
违背同源策略就是跨域。
Ajax默认要求遵循同源策略。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>首页</title>
  8. </head>
  9. <body>
  10.     <h1>OKKJOO</h1>
  11.     <button>点击获取用户数据</button>
  12.     <script>
  13.         const btn = document.querySelector('button');
  15.         btn.onclick = function (){
  16.             const xhr = new XMLHttpRequest();
  17.             //这里满足同源策略,所以url可以简写
  18.             xhr.open('GET','/data');
  19.             //发送
  20.             xhr.send();
  21.             xhr.onreadystatechange = function(){
  22.                 if(xhr.readyState === 4){
  23.                     if(xhr.status >= 200 && xhr.status <300){
  24.                         console.log(xhr.response);
  25.                     }
  26.                 }
  27.             }
  28.         }
  29.     </script>
  30. </body>
  31. </html>
  1. const express = require('express');
  2. const app = express();
  3. app.get('/home',(request, response)=>{
  4.     response.sendFile(__dirname + '/index.html');
  5. })
  6. app.get('/data',(request,response)=>{
  7.     response.send('用户数据');
  8. });
  10. app.listen(9000,()=>{
  11.     console.log("服务已经启动...9000端口监听中");
  12. });