CORS

  • Cross-Origin Resource Sharing跨域资源共享。是官方的跨域解决方案
  • 特点：不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get与post请求。
  • 跨域资源共享标准新增了一组HTTP首字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
  • 工作方式：通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应行放行

cors.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CORS</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: 1px solid #90b;
    }
  </style>
</head>

<body>
  <!-- 210324 -->
  <button>发送请求</button>
  <div id="result"></div>
  <script>
    const btn = document.querySelector('button');
    btn.onclick = function () {
      //1、创建对象
      const x = new XMLHttpRequest();
      //2、初始化设置
      x.open("GET", "http://127.0.0.1:8000/cors-server");
      //3、发送
      x.send();
      //4、绑定事件
      x.onreadystatechange = function () {
        if (x.readyState === 4) {
          if (x.status >= 200 && x.status < 300) {
            //输出响应体
            console.log(x.response);
          }
        }
      }
    }
  </script>
</body>

</html>

server.js

//cors
app.all('/cors-server', (req, res) => {
  // Access-Control-Allow-Origin
  //响应头
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "*");
  res.setHeader("Access-Control-Allow-Method", "*");
  res.send('hello cors')
})
posted @ 2021-07-14 15:13  STRIVE-PHY  阅读(23)  评论(0)  编辑  收藏  举报