CORS如何实现跨域（前端+后端代码实例讲解）

最新推荐文章于 2024-09-13 22:06:15 发布

M_emory_

最新推荐文章于 2024-09-13 22:06:15 发布

阅读量748

点赞数

分类专栏： js 一些重要笔记文章标签：前端 node.js js 安全

本文链接：https://blog.csdn.net/M_emory_/article/details/131521710

版权

一些重要笔记同时被 2 个专栏收录

24 篇文章 2 订阅

订阅专栏

20 篇文章 2 订阅

订阅专栏

文章介绍了CORS（跨源资源共享）机制，它是通过HTTP头解决跨域问题的一种方式。浏览器因安全限制阻止跨域请求，但CORS允许服务器指定其他源访问资源。通过添加access-control-allow-origin响应头，后端代码能允许跨域请求成功。文中提供了一个简单的示例，展示如何在Node.js后端实现CORS支持。

摘要由CSDN通过智能技术生成

书接上回，上一篇文章讲解了用 jsonp 来解决跨域问题，这篇文章讲解另外一种方法也可以解决跨域问题，那就是CORS（跨源资源共享）。

什么是CORS？

下面是官方的解释：跨源资源共享（CORS，或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

下面举一个简单的跨域请求的例子

现在我从 http://127.0.0.1:5500/index.html 向服务器 localhost:3000/api/aaa 发起请求，得到想要的数据，但是会报下面的错误：

// index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        fetch("http://localhost:3000/api/aaa")
            .then(res => res.json())
            .then(res => {
                console.log(res);
            })
    </script>
</body>

</html>

这是由于出于安全性，浏览器限制脚本内发起的跨源 HTTP 请求。像 XMLHttpRequest 和 Fetch API 都遵循源。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源，除非响应报文包含了正确 CORS 响应头。

CORS的应用

只需在后端代码里面加上以上内容就可以了

 "access-control-allow-origin": "*"

下面是完整的后端代码

var http = require("http")
var url = require("url")

http.createServer((req, res) => {
    var urlobj = url.parse(req.url, true)
    res.writeHead(200, {
        "Content-Type": "application/json;charset=utf-8",
        "access-control-allow-origin": "*"
    })
    switch (urlobj.pathname) {
        case "/api/aaa":
            res.end(`${JSON.stringify({
                name: "zhangsan", 
                age: 21
            })}`)
            break;
        default:
            res.end("404")
    }
}).listen(3000, () => {
    console.log("start");
})

这下我们就可以拿到服务器返回来的数据了