nodejs系列:4.http 服务器配置跨域

1,225 阅读5分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第6天,点击查看活动详情

系列介绍

该系列主要是介绍一些nodejs相关的基础知识,没有什么特别难的知识点,都是一些比较基础知识点。大家学习起来,也会比较容易理解和接收。

这些知识点,也是以前自己学习nodejs的时候,学习过的知识点。有些知识点,可能是由于学习的时间比较久了,也有可能是平时工作中用到的机会比较少,也差不多快把它们都忘记掉了。现在把它们都写下来,写成文章,一方面是记录下自己以前学习的nodejs知识点,一方面也是复习巩固自己以前学习的nodejs知识点。不要学着学着,就把以前的知识点都忘光了。

nodejs介绍

nodejs摘抄过来的node介绍:

Node.js 是一个开源和跨平台的 JavaScript 运行时环境。 它几乎是任何类型项目的流行工具!

Node.js 在浏览器之外运行 V8 JavaScript 引擎(Google Chrome 的内核)。 这使得 Node.js 的性能非常好。

Node.js 应用程序在单个进程中运行,无需为每个请求创建新的线程。 Node.js 在其标准库中提供了一组异步的 I/O 原语,以防止 JavaScript 代码阻塞,通常,Node.js 中的库是使用非阻塞范式编写的,使得阻塞行为成为异常而不是常态。

当 Node.js 执行 I/O 操作时(比如从网络读取、访问数据库或文件系统),Node.js 将在响应返回时恢复操作(而不是阻塞线程和浪费 CPU 周期等待)。

这允许 Node.js 使用单个服务器处理数千个并发连接,而不会引入管理线程并发(这可能是错误的重要来源)的负担。

Node.js 具有独特的优势,因为数百万为浏览器编写 JavaScript 的前端开发者现在无需学习完全不同的语言,就可以编写除客户端代码之外的服务器端代码。

在 Node.js 中,可以毫无问题地使用新的 ECMAScript 标准,因为你不必等待所有用户更新他们的浏览器,你负责通过更改 Node.js 版本来决定使用哪个 ECMAScript 版本,你还可以通过运行带有标志的 Node.js 来启用特定的实验性功能。

我们可以从介绍里面看到,nodejs还是挺棒的。

nodejs遵循的是commomjs规范,所以使用nodejs的时候,需要按照commomjs规范来编写代码。

环境安装

实现之前,你首先需要安装nodejs环境。因为我们写的代码需要在node环境上运行,如果你没有,那么文件会运行不了。

以下是nodejs的安装地址,如果你没有安装的话,可以先把它安装上。安装了可以忽略这一步,跳到下面一步。

nodejs安装

前言

近来在怎么实现系列,我发布了一篇文章7.怎么用原生js实现一个ajax请求。在这篇文章了,我先是用原生js写了一个ajax请求。然后发送请求,发现请求报错了。

到控制台查看报错信息

0001.png has been blocked by CORS policy,这段报错信息,指的是该请求跨域了。

我们要先了解一下跨域。

什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

为什么会出现跨域

这是出于浏览器的同源策略限制。同源策略是一种约定,是浏览器最核心、最基本的安全功能,颗缺少了同源策略,则浏览器的正常功能可能都会受到影响。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

同源

当两个页面具有相同的协议、主机和端口号,则称之为同源。

现在产生了跨域问题,怎么解决?

通过设置响应头的相关字段,可以解决跨域问题

实现

发送请求

先创建一个html文件,里面写上上一篇文章7.怎么用原生js实现一个ajax请求文章里的ajxa请求的代码。

let xhr =new XMLHttpRequest()
        xhr.open('get','http://localhost:3000')
        xhr.onreadystatechange = function(){
            if(xhr.readyState ==4) {
                console.log(xhr.responseText);
            }
        }
        xhr.send()

这段代码,一会等服务器启动了,用来发送请求。

服务器

创建一个index.js文件,引入http模块,创建一个服务器。


const http = require('http')
const server = http.createServer()
server.listen(3000, () => {
    console.log('服务器启动了');
})

在cmd里,用node启动服务器。

然后,用上面创建的html文件,发送ajax请求。

到控制台查看

0001.png 我们可以看到,这时候报错,提示跨域了。

接下来,我们设置响应请求的响应头


const server = http.createServer((req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*')
    res.setHeader('Access-Control-Allow-Headers', 'X-Rquested-With')
    res.setHeader('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
    res.setHeader('X-Powered-By', '3.2.1')
    res.setHeader('Content-Type', 'application/json;charset=utf-8')
    res.end('返回数据')
})

在cmd里,用node重新启动服务器。

再次发送请求,到控制查看信息

0003.png

这时我们可以看到,请求成功了,没有报错。同时,把响应信息给打印出来了。

小结

当请求的协议、域名、端口和当前页面的url不一致时,会产生跨域。

解决跨域的办法是,设置响应请求的响应头字段Access-Control-Allow-Origin,让浏览器允许跨域。

最后,放上自己比较喜欢的一句诗句:

千淘万漉虽辛苦,吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》