用CORS模拟跨域

最新推荐文章于 2023-03-22 23:07:59 发布

lyx9904

最新推荐文章于 2023-03-22 23:07:59 发布

阅读量424

点赞数

分类专栏：重学js系列

本文链接：https://blog.csdn.net/lyx9904/article/details/117304139

版权

重学js系列专栏收录该内容

13 篇文章 0 订阅

订阅专栏

问起跨域，很多人都可以很轻松的说出JSONP（同源政策只限制XHR，而对于img,script的src没有限制，但是它只能通过get请求）,CORS（服务器端设置）等等
但是，让其不看资料手写一遍估计够呛的。
比如我，今天尝试用CORS实现跨域，然而发现自己nodejs的早已忘完了。。

发起跨域请求的服务器代码：

const express = require("express");
const app = express();
const path = require("path")

app.use(express.static(path.join(__dirname, 'public')));
//拦截静态资源，为的就是页面能够顺利发送ajax请求
app.get('/',(req,res) => {
    console.log(111);
    res.header('Content-Type', 'text/html; charset=utf-8')
    res.end("我是Ajax请求过来的信息")
})
app.listen(3001);
console.log('服务器3001已开启');

发起跨域请求的页面：
注意：ajax得在服务器上请求才有效果，所以得通过localhost:3001/index1.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>
    <button>点击发送Ajax实现跨域</button>
    <p>我是原始的信息</p>
    <script>
        const btn = document.querySelector("button");
        const  p = document.querySelector("p");
      
        btn.addEventListener("click",function(){
            let xhr = new XMLHttpRequest()
        xhr.open('get','http://localhost:3002')
        xhr.send()
       
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                console.log(xhr.responseText);
                p.innerText = xhr.responseText
            }
        }
        console.log(xhr);
        })
      
     
    </script>
</body>
</html>

接受跨域请求的信息

const express = require("express");
const app = express();
app.use((req,res,next) => {
    res.header("Access-Control-Allow-Origin","*")
    console.log(req.method,req.url);
    next()
})
app.get('/',(req,res) => {
    res.header('Content-Type', 'text/html; charset=utf-8')
    res.end("我是另一台服务器的信息")
})
app.listen(3002);
console.log('服务器3002已开启');