【网络安全相关知识】CORS 跨域请求

最新推荐文章于 2023-12-10 16:34:27 发布

menghen113

最新推荐文章于 2023-12-10 16:34:27 发布

阅读量155

点赞数 1

分类专栏：前端学习文章标签： web安全 javascript 前端

本文链接：https://blog.csdn.net/menghen113/article/details/129587159

版权

前端学习专栏收录该内容

26 篇文章 2 订阅

订阅专栏

视频

什么是跨域：
两种方式实现跨域

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello</h1>
    <!-- 法1-->
    <!-- <script>
      fetch('http://localhost:91')
        .then((res) => res.text())
        .then((data) => {
          alert(data);
        });
    </script> -->

    <!-- 法2-->
    <script>
      function f(data) {
        alert(data);
      }
    </script>
    <script src="http://localhost:91?callback=f"></script>
  </body>
</html>

server.js:

var express = require('express')

//90端口的访问 将当前目录作为http服务
var app = express()
app.use(express.static(__dirname))
app.listen(90)

//91端口的服务器 返回数据
var app2 = express();

// 1.修改响应头
// app2.get("/", function (req, res) {
//   res.header("Access-Control-Allow-Origin","*")
//   res.send("你好")
// })



//href,src请求下来的js脚本,css,img,视频等都不存在跨域问题，
//只有通过ajax请求下来的数据才存在跨域问题
// 2.jsonp即基于这个原理
app2.get("/", function (req, res) {
  var funcname = req.query.callback;
  res.send(funcname + "('你好')")
  //f('你好')
})

app2.listen(91)