NodeJS跨域问题CORS②

已于 2023-04-09 12:21:12 修改
阅读量793 收藏 2
点赞数 4
分类专栏： NODEJS 文章标签： javascript 前端 开发语言
于 2023-03-31 22:10:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61490399/article/details/129889682
版权

文章目录

✨文章有误请指正，如果觉得对你有用，请点三连一波，蟹蟹支持😘

                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽

前言

  1. Node.js是一个javascript运行环境。它让javascript可以开发后端程序，实现几乎其他后端语言实现的所有功能，可以与```PHP、Java、Python、.NET、Ruby等后端语言平起平坐。
  2. Nodejs是基于V8引擎，V8是Google发布的开源JavaScript引擎，本身就是用于Chrome浏览器的JS解释，但是Node之父 Ryan Dahl在这里插入图片描述把这V8搬到了服务器上，用于做服务器的软件。

NODE内置模块

   HTTP模块

–
W3C : https://www.w3schools.cn//W3C

Node:https://nodejs.cn/api/http.html

功能：创建服务器

创建简单的服务器

–

var http = require("http")

//创建服务器
http.createServer((req, res) => {
    //req 接受浏览器传的参数 
    //res 返回渲染的内容

    res.writeHead(200, { "Content-Type": "text/html;charset=utf-8" })
    res.write(`
      <html>
          <b>hello wolrd</b>
          <div>大家好</div>
      </html>
    `)
    res.end()
}).listen(8080, () => {
    console.log("server start http://127.0.0.1:8080/")
})

不同接口返回不同界面

–

var http = require("http")
//创建服务器

var server = http.createServer()

server.on("request", (req, res) => {
    //req 接受浏览器传的参数 
    //res 返回渲染的内容

    if (req.url === "/favicon.ico") {
        // todo 读取本地图标
        return
    }
    res.writeHead(renderStatus(req.url), { "Content-Type": "text/html;charset=utf-8" })
    res.write(renderHTML(req.url))
    res.end()
})

server.listen(8080, () => {
    console.log("server start http://127.0.0.1:8080/")
})

function renderHTML(url) {

    switch (url) {
        case "/home":
            return `
            <html>        
                <div>home页面</div>
            </html>
          `
        case "/list":
            return `
            <html>
                <div>list页面</div>
            </html>
          `
        case "/api/list":
            return `
            ["list1","list2","list3"]
          `
        case "/api/home":
            return `
            {name:"kerwin"}
          `
        default:
            return `
            <html>
                <div>not found</div>
            </html>
          `
    }

}

function renderStatus(url) {
    var arr = ["/home", "/list", "/api/home", "/api/list"]
    return arr.includes(url) ? 200 : 404
}

JSONP解决跨域问题

–

客户端

<!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>
    <!-- jsonp接口调用 -->

    <script>
        var oscript = document.createElement("script")
        oscript.src = "http://localhost:8080/api/As?callback=test"

        document.body.appendChild(oscript)


        function test(obj) {
            console.log(obj)
        }
    </script>
</body>

</html>

服务器

–

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

http.createServer((req, res) => {
    var urlobj = url.parse(req.url, true)
    console.log(urlobj.query.callback)
    switch (urlobj.pathname) {
        case "/api/As":
            res.end(`${urlobj.query.callback} (${JSON.stringify({
                name: "kerwin",
                age: 100
            })})`)
            break;
        default:
            res.end("404")
    }
}).listen(8080, () => {
    console.log("server start http://127.0.0.1:8080/")
})

CORS解决跨域问题

客户端

<!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:8080/api/As")
            .then(res => res.json())
            .then(res => {
                console.log(res)
            })
    </script>
</body>

</html>

服务器


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

http.createServer((req, res) => {
    var urlobj = url.parse(req.url, true)
    // console.log(urlobj.query.callback)

    res.writeHead(200, {
        "Content-Type": "application/json;charset=utf-8",
        //cors头，
        "access-control-allow-origin": "*"
    })

    switch (urlobj.pathname) {
        case "/api/As":
            res.end(`${JSON.stringify({
                name: "kerwin",
                age: 100
            })}`)
            break;
        default:
            res.end("404")
    }
}).listen(8080, () => {
    console.log("server start http://127.0.0.1:8080/")
})

HTTP客户端模块~Get

–

客户端

<!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/As").then(res => res.json()).then(res => {
            console.log(res)
        })
    </script>
</body>

</html>

服务器

var http = require("http")
var https = require("https")
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",
        //cors头，
        "access-control-allow-origin": "*"
    })

    switch (urlobj.pathname) {
        case "/api/As":
            // 客户端 去猫眼要数据
            httpget((data) => {
                res.end(data)
            })
            break;
        default:
            res.end("404")
    }
}).listen(3000, () => {
    console.log('http://127.0.0.1:3000');
})


function httpget(cb) {
    var data = ""
    https.get(`https://i.maoyan.com/api/mmdb/movie/v3/list/hot.json?ct=%E5%8C%97%E4%BA%AC&ci=1&channelId=3`, (res) => {
        res.on("data", (chunk) => {
            data += chunk
        })

        res.on("end", () => {
            console.log(data)
            cb(data)
        })
    })
}

HTTP客户端模块~Post

–

Node Https : https://nodejs.cn/api/https.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:8080/api/As")
            .then(res => res.json())
            .then(res => {
                console.log(res)
            })
    </script>
</body>

</html>

服务器

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

http.createServer((req, res) => {
    var urlobj = url.parse(req.url, true)
    // console.log(urlobj.query.callback)

    res.writeHead(200, {
        "Content-Type": "application/json;charset=utf-8",
        //cors头，
        "access-control-allow-origin": "*"
    })

    switch (urlobj.pathname) {
        case "/api/As":
            //客户端 去小米优品要数据
            httppost((data) => {
                res.end(data)
            })
            break;
        default:
            res.end("404")
    }
}).listen(8080)


function httppost(cb) {
    var data = ""

    var options = {
        hostname: "m.xiaomiyoupin.com", //域名
        port: "443", //端口
        path: "/mtop/market/search/placeHolder", //地址
        method: "POST", //请求方法
        headers: {
            "Content-Type": "application/json"
            // "Content-Type":"x-www-form-urlencoded" 
        }
    }
    var req = https.request(options, (res) => {
        res.on("data", chunk => {
            data += chunk
        })
        res.on("end", () => {
            cb(data)
        })
    })
    // req.write("name=kerwin&age=100")
    req.write(JSON.stringify([{}, { "ypClient": 3 }]))
    req.end()
}

HttpCheerio模块蜘蛛

–

GitHub : https://github.com/cheeriojs/cheerio

服务器

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

var cheerio = require("cheerio")

http.createServer((req, res) => {
    var urlobj = url.parse(req.url, true)

    res.writeHead(200, {
        "Content-Type": "application/json;charset=utf-8",
        //cors头，
        "access-control-allow-origin": "*"
    })

    switch (urlobj.pathname) {
        case "/api/As":
            //客户端 去猫眼要数据
            httpget((data) => {
                res.end(spider(data))
            })
            break;
        default:
            res.end("404")
    }
}).listen(8080, () => {
    console.log('http://127.0.0.1:8080');
})


function httpget(cb) {
    var data = ""
    https.get(`https://i.maoyan.com/`, (res) => {
        res.on("data", (chunk) => {
            data += chunk
        })

        res.on("end", () => {
            cb(data)
        })

    })
}

function spider(data) {
    // npm i cheerio 
    let $ = cheerio.load(data)

    let $moviewlist = $('.mb-outline-b.content-wrapper')
    console.log($moviewlist)
    let movies = []

    $moviewlist.each((index, value) => {
        movies.push({
            title: $(value).find(".title").text(),
            grade: $(value).find(".grade").text(),
            actor: $(value).find(".actor").text()
        })
    })

    return JSON.stringify(movies)
}

效果

在这里插入图片描述

总结

以上是个人学习Node的相关知识点，一点一滴的记录了下来，有问题请评论区指正，共同进步，这才是我写文章的原因之，如果这篇文章对您有帮助请三连支持一波

SYFStrive
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
【node.js从入门到精通】编写接口，使用CROS解决跨域问题，jsonp的接口
zhaochen1127的博客
10-21 927
接口是后端设计的一套供给第三方使用的方法。(第三方指前端/后端)接口通过网络协议来调用，最常用的协议是HTTP协议。在定义一个接口时，会写好接口路径和接口方法名的映射，然后前端通过接口路径来调用方法，接下来就看看什么是接口
node的Express跨域解决方案代码
08-12
Nodejs Express Ajax跨域请求实例代码，Nodejs Express Ajax跨域请求实例代码
其他内容：Nodejs 中的 CORS
最新发布
新华编程特战队
03-16 1513
前端客户端向后端发送请求，由于后端允许所有源 URL，因此浏览器允许该请求，并将数据提取到客户端。正如我们所讨论的，浏览器实现了一个同源策略，该策略允许从其源（URL）获取资源，并阻止来自外部URL的资源。只允许使用上述方法。让我们编写我们的服务器。在下一节中，我们将从头开始构建一个简单的应用，并查看当我们尝试在没有 CORS 标头的情况下访问外部后端时会发生什么。如果请求发送到同一源的服务器，则浏览器允许该请求，并且不会被阻止。正如我们之前所讨论的，除非我们实现了 CORS，否则源的更改将阻止所有请求。
Node.js使用CORS解决跨域问题
weixin_73368873的博客
10-22 3198
本文简单说明CROS解决跨域的理论，并用Node.js解决跨域问题的代码
node.js中的 cors 中间件
Lovetoeatfruit的博客
06-03 927
只有支持 XMLHttpRequest Level2 的浏览器，才能正常访问开启了 CORS 的服务端接口 (例如: IE10+、Chrome4+、FireFox3.5+)。等方式请求服务器的资源，则需要在服务器端，通过 Access-Control-Alow-Methods来。预检请求的特点: 客户端与服务器之间会发生两次请求，OPTION 预检请求成功之后，才会发起真正的请求。三者之一如果客户端向服务器发送了额外的请求头信息，则需要在服务器端，通过。，所以这一次的 OPTION 请求称为“预检请求”。
Nodejs 解决跨域（CORS）
Doug_的博客
03-11 5137
Nodejs 解决跨域（CORS）
【node.js】跨域详解
weixin_50863323的博客
07-19 1418
跨域：本质是浏览器基于的一种安全手段同源策略:是一种约定，他是浏览器最核心也最基本的安全功能当以上三个有任意一项不同时，就会触发同源策略，就会产生跨域我们会把触发了同源策略的请求，叫做跨域请求。
Node.js设置CORS跨域请求中多域名白名单的方法
10-20
主要介绍了Node.js设置CORS跨域请求中多域名白名单的方法，文中通过示例代码介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
NodeJS配置CORS实现过程详解
01-19
跨域问题主要在header上下功夫 首先提供一个w3c的header定义 http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html 再提供一个网友提供的header详解 http://kb.cnblogs.com/page/92320/ 这两个有助于帮助大家...
node-cors:跨域解析中间件
05-13
您可以将白名单设置为允许跨域。 安装 $ npm install node-cors 或者 $ yarn add node-cors 用法 var express = require('express'); var cors = require('node-cors'); var app = express(); //you can add any ...
Node.js配合node-http-proxy解决本地开发ajax跨域问题
12-23
2. CORS跨域：后端接口在返回的时候，在header中加入’Access-Control-Allow-origin’:* 之类的（有的时候后端不方便这样处理，前端就蛋疼了） 3. 用nodejs搭建本地http服务器，并且判断访问接口URL时进行转发，...
nodejs搭建本地服务器轻松解决跨域问题
10-18
主要介绍了利用nodejs搭建本地服务器 解决跨域问题,需要的朋友可以参考下
【JavaScript源代码】NodeJS配置CORS实现过程详解.docx
12-29
NodeJS配置CORS实现过程详解 　跨域问题主要在header上下功夫　首先提供一个w3c的header定义 http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html　　再提供一个网友提供的header详解 ...
CORS的原理以及在Node.js中的使用
聚焦游戏和图形引擎开发技术
10-31 394
前端浏览器中的JavaScript代码使用XMLHttpRequest对象或Fetch API等方法发起HTTP请求到不同域的服务器。当浏览器中的JavaScript代码发起跨域请求时，浏览器会执行CORS检查。它会检查请求的目标域（服务器的域）是否在服务器的响应头中包含了合适的标头。如果服务器允许该请求的来源，浏览器会继续发送请求。当服务器接收到请求并准备发送响应时，在响应头中设置标头，指定允许访问的域。这个标头可以是具体的域名，也可以是通配符（），表示允许任何域进行访问。
【node.js】跨域的解决办法（CORS方法、同源策列的理解）
嗨，朋友你好！我是前端领域的工作者
01-03 4518
【node.js】面对cors解决跨域问题、同源策略的概念。
nodejs——解决跨域问题
@er
10-10 5430
1什么是跨域 2解决 1 jsonp(缺点：不能请求post请求） 2服务端代理 （由于后端请求不受浏览器同源策略影响，将前端跨域请求放在后端）
使用 Express 写接口
weixin_43563864的博客
10-27 1350
1. 使用 Express 写接口 1.实例 // express.js const express = require('express') const app = express() const port = 80; // 配置解析表单数据的中间件 app.use(express.urlencoded({ extended: false })); const apiRouter = require('./14apiRouter'); // 把路由模块，注册到 app 上 app.use('/api',
nodejs解决跨域问题
weixin_54555146的博客
04-15 9961
三种办法解决nodejs中的跨域问题 1.首先是最简单有效的通过中间键解决 在命令行中输入 npm i cors -s 下载cors中间键并且调用 app.use(cors()) 即可解决 2.第二种是直接在路由中输入 res.setHeader("Access-Control-Allow-Origin", "*"); 这个也比较简单但是有些解决不了 3.第三种是用app.all解决，比起第二种更加全面 包含了不同请求格式 app.all('*', function (req, res, next)
nodejs解决cors跨域问题
09-09
要解决Node.js中的CORS跨域问题，可以使用以下方法： 在Node.js后台中，可以通过设置响应头来允许跨域访问。在示例代码中，可以看到使用了以下响应头的设置： - 'Access-Control-Allow-Credentials': 'true' ：允许...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SYFStrive

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值