使用Express框架简单创建服务器实现跨域，JS发送AJAX请求并更改头信息

已于 2023-11-28 00:08:51 修改
阅读量614 收藏 2
点赞数 2
分类专栏： Express 跨域 文章标签： ajax node.js javascript express
于 2021-10-15 00:00:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42390185/article/details/120773938
版权

目录

一、GET or POST请求

1、进入Node.js官网下载Node

Node.js官网

2、在工程项目的根目录下安装express

使用vscode，在项目工程的空白区右击，选择"在集成终端打开"，或者使用Ctrl + ~。然后输入以下npm命令安装

npm i express

3、新建一个server.js文件

文件作用：创建服务器，对发出的请求给出响应。

// 1、获取express
const express = require('express');

// 2、创建express实例
const app = express();

// 3、GET请求
app.get('/server', (req, res) => {
	/*
		req：requset ---> 请求
		res：response ---> 响应
	*/
	// 1、设置响应头信息
	// Access-Control-Allow-Origin：访问控制源  
	// "*"：表示允许跨域
	res.setHeader('Access-Control-Allow-Origin', '*');
	// 2、发送响应信息
	res.send('Hello AJAX');
});

// POST请求
/*
app.post('/server', (req, res) => {
	res.setHeader('Access-Control-Allow-Origin', '*');
	res.send('Hello AJAX');
});
*/

// 4、设置服务器端口，以及状态监听
app.listen(8000, ()=>{
	console.log('8000端口监听中...')
})

注：启动服务时，打开当前文件目录的终端，输入：node server.js
方法一：可以先找到包含server.js的文件夹，右键打开终端。
方法二：使用Ctrl + ~ 调出vscode的终端，cd AJAX/GET请求（cd后面的是路径，指定到server.js的根目录），回车后再输入：node server.js

4、新建一个html文件

文件作用：用于向服务器发送AJAX请求

<body>
	<!-- 用于发送AJAX请求，显示响应内容 -->
    <div id="result" style="width: 200px; height: 100px; border: solid 1px #bfa;"></div>
    <script>
      	// 1、获取div节点
        var result = document.getElementById('result');
        // 2、对div节点进行事件监听，当鼠标移动到div区域的时候发送AJAX请求
        result.onmouseover = function () {
            // 3、创建AJAX请求实例
            const xhr = new XMLHttpRequest();

            // 4、设置初始化请求。（数据的发送可以使用变量，这里只是做示范）
            // GET发送数据，在?后面接数据
            // 启动服务器后可以直接在地址栏输入：http://127.0.0.1:8000/server或者http://localhost:8000/server来访问
            // xhr.open('GET', "http://127.0.0.1:8000/server?a=100&b=200&c=300" )
            xhr.open('POST', "http://127.0.0.1:8000/server")

            // 5、发送请求
            // POST可以这样发送数据
            xhr.send(JSON.stringify({name:'张三', age:19, sex:'男'}))

            // 6、事件绑定处理服务端返回的结构
            xhr.onreadystatechange = function () {
             /*
             * readystate是xhr对象中的属性，表示状态 0 1 2 3 4
             *  0：表示未初始化
             *  1：表示open方法调用完毕
             *  2：表示send方法调用完毕
             *  3：表示服务端返回了部分的结果
             *  4：表示服务端返回了全部的结果
             */
                if (xhr.readyState === 4) {
                	// 这里是判断状态码，一般大于等于200小于300的状态码都算正常。
                    if (xhr.status >= 200 && xhr.status < 300){
                    	// 7、设置div的内容文本为AJAX获取的响应内容
                        result.innerHTML = xhr.response
                    }else{
                    	// 反之输出状态码
                    	result.innerHTML = xhr.status
                    }
                }
            }
        }
    </script>
</body>

二、All请求和更改请求头信息

与上面的步骤一样，这里就不在冗余阐述了

1、新建server.js文件

// 1、获取express
const express = require('express');

// 创建express实例
const app = express();

// 3、所有请求
app.all('/server', (req, res) => {
	// 跨域允许
    res.setHeader('Access-Control-Allow-Origin', '*')
    // 任何头信息
    res.setHeader('Access-Control-Allow-Headers', '*')
    res.send('Hello World')
})

app.listen(8000, () => {
    console.log('服务已经启动，8000端口监听中...')
})

2、新建html文件

<body>
    <div id="result" style="width: 200px; height: 100px; border: solid 1px #bfa;"></div>
    <script>
       
        var result = document.getElementById('result');
        result.onmouseover = function () {
            // 1、创建实例
            const xhr = new XMLHttpRequest();

            // 2、设置初始化请求
            xhr.open('POST', "http://127.0.0.1:8000/server")

            // 设置请求头
            /*
            application/x-www-form-urlencoded： 窗体数据被编码为键值对，这是标准的编码格式。 
            multipart/form-data： 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。 
            text/plain： 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。
            */
           	// 参数一：设置请求头类型。  参数二：设置编码格式
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            
            // 因为我们设置了接收任何头信息，所以这里可以自定义，一般使用自定义来确认用户，对接后端。
            xhr.setRequestHeader('test','123456')

            // 3、发送请求
            let obj = {name:'张三', sex:'男', age:'19'}
            xhr.send(JSON.stringify(obj));
            
            // 4、判断请求
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300){
                        result.innerHTML = xhr.response
                    }else{
                    	result.innerHTML = xhr.status
                    }
                }
            }
        }
    </script>
</body>

程序运行后，我们可以在控制台的Network中查看server文件的各种信息。
或者选择XHR，只捕获AJAX

在这里插入图片描述

总结

  1. 创建服务器
    // 方法一（使用express框架）：
    	const express = require('express')
    	const app = express();
    	
    // 方法二（使用Node.js）：
    	var http = require('http');
   	 http.createServer(function (req, res) {
  	 		res.writeHead(200, {'Content-Type': 'text/plain'});
   			res.end('Hello World\n');
   	}).listen(5000, '127.0.0.1');
   console.log('Server Running at http://127.0.0.1:5000/')
  1. 启动服务器
	node server.js

server.js是文件，可以自命名，但需要在文件的根目录下使用命令启动

  1. 发送AJAX请求，获取响应体
	const xhr = new XMLHttpRequest();
	xhr.open('GET', 'http://127.0.0.1:8000/server');
	// xhr.open('POST', 'http://127.0.0.1:8000/server');
	xhr.send();
	xhr.onreadystatechange = function() {
		if(xhr.readyState === 4){
			if(xhr.status >= 200 && xhr.status < 300){
				let content = xhr.response
			}
		}
	}
  1. 自定义头信息。
//  任何请求，这里的参数一是地址路径，与xhr.open的第二个参数相对应
app.all('/server', (req, res) => {
   // 跨域允许
   res.setHeader('Access-Control-Allow-Origin', '*')
   // 任何头信息
   res.setHeader('Access-Control-Allow-Headers', '*')
   res.send('Hello World')
})
雨落Liy
关注
专栏目录
使用AJAX进行跨域访问的JavaScript技术
CsCufft的博客
10-10 87
由于浏览器的同源策略（Same-Origin Policy）限制，JavaScript默认只能向与当前页面具有相同协议、域名和端口的服务器发起请求，而无法直接与其他域名进行通信。在上面的代码中，我们使用XMLHttpRequest对象创建了一个异步的GET请求，并指定了目标URL（https://www.example.com/api/data）。需要注意的是，以上示例仅适用于简单的GET请求。对于带有身份验证或涉及预检请求（例如使用自定义标头的POST请求）的复杂请求，还需要进行额外的配置和处理。
【前端】Ajax请求以及配合express后台服务的用法
Shinersmile的博客
01-19 710
Content-type是网络上传输内容的格式标准，用于定义网络文件的类型和网页的编码。AJAX全称Asynchronous JavaScript And XML，就是异步的JS和XML。通过它可以在浏览器中向服务器发送异步请求，无刷新获取数据。它不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。实现AJAX的执行步骤如4.2。1.1 无需刷新页面与服务器端通信1.2 允许根据用户事件更新部分页面内容2.1 没有浏览历史，不能回退2.2 存在跨域问题。
express 发送post请求
huangbaokang的博客
04-22 3504
踩过的一个坑，获取不到express post请求参数，如下 const express = require("express"); const app = express(); // localhost:8090/hello app.get("/hello",function(req,res){ res.send("hello huangbaokang"); }) /** POST...
express note day01 发送请求 获取请求参数 托管静态资源 后端路由 模块化路由
weixin_58562753的博客
04-23 1752
express 发送请求 获取请求参数 托管静态资源 后端路由 模块化路由
Express中的cors跨域请求
最新发布
m0_54007573的博客
06-19 486
Express中的cors跨域请求
express 中跨域头设置
www 你所不知道的
07-23 2313
express 的跨域头设置先看代码var express = require('express'); var app = express(); //设置跨域访问 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Cont
express 跨域
kaixuanweb的博客
03-31 535
目标：express   实现跨域；前提：在服务端执行npm install cors；方法一：在app.js:var cors = require("cors");app.use(cors());app.all('*', function(req, res, next) { // res.header("Access-Control-Allow-Credentials","true")...
Express的请求和响应对象，客户端（通常是浏览器）是如何向服务器请求一个页面
m0_56132701的博客
06-30 694
在用 Express 构建 Web 服务器时，大部分工作都是从请求对象开始，到响应对象终止。这两个对象起源于 Node，Express 对其进行了扩展。在深入探讨这两个对象之前，我们先了解一点背景知识，看看客户端（通常是浏览器）是如何向服务器请求一个页面，以及页面是如何返回的。
express如何解决ajax跨域访问session失效问题详解
10-16
Express作为Node.js中广泛使用的web框架，提供了处理这种情况的解决方案。本文将详细探讨如何解决Express中ajax跨域访问时session失效的问题。 首先，我们需要理解为何在跨域请求中session会失效。在HTTP协议中，...
express框架+fetch/axios.js（本机实现跨域请求）
Lawless
01-08 473
之前实现过使用jQuery-Ajax跨域请求，写过一个专题：jQuery-Ajax实现跨域 Promise实现跨域 使用Promise也可以实现跨域请求。 普通的Promise模板： var p = new Promise(function (resolve, reject) { // 这里用于实现异步任务 setTimeout(function () { ...
AJAX学习笔记：什么是AJAX、http协议、AJAX请求发送方法（jQuery，Axios，fetch）、跨域、CORS
qq_48376006的博客
09-16 197
几种发送AJAX的方法，跨域问题，CORS等。
node的Express跨域解决方案代码
08-12
Nodejs Express Ajax跨域请求实例代码，Nodejs Express Ajax跨域请求实例代码
如何在js中使用ajax请求数据,在 JS 中如何使用 Ajax 来进行请求
weixin_36002897的博客
08-05 4673
做者：Danny Markov译者：前端小智来源：tutorialzine点赞再看，微信搜索【大迁世界】关注这个没有大厂背景，但有着一股向上积极心态人。本文GitHubhttps://github.com/qq44924588... 上已经收录，文章的已分类，也整理了不少个人文档，和教程资料。**最近开源了一个 Vue 组件，还不够完善，欢迎你们来一块儿完善它，也但愿你们能给个 star 支持一下...
十二、Express接口编写 —— 跨域问题
灵魂学者的博客
01-03 1514
在前面的HTTP模块内容内容当中讲到这个跨域的问题，跨域就涉及到浏览器的同源策略，跨域只出现在浏览器当中，在浏览器当中去执行脚本的时候会进行一个同源检测，只有是同源的脚本才会被浏览器执行，不同源就是跨域，同源就是请求的url协议、域名、端口号要相同，只有相同的才能够互相访问，不同就会出现跨域问题。下面用一个简单的例子图示理解：下面来回顾之前通过后端处理的方式解决跨域的问题；通过后端的设置来解决请求跨域的问题： http://127.0.0.1:5500发起请求http://127.0.
express创建一个应用程序，发送请求
weixin_30711917的博客
05-22 105
目录结构： 1 // 引入模块 2 var express = require("express"); 3 // 创建一个express应用程序 4 var app = express(); 5 // 静态文件本地 6 app.use(express.static("public"));//##直接在网页里输入文件名可显示网页，例：http://127.0.0...
原生JS发送ajax请求
BB_____的博客
09-25 5398
开门见山，直入主题。 既然要发送ajax请求，那ajax是什么呢？ AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 通俗点来说就是可以让你在不刷新（重载）网页的情况下和你的后台交换数据，从而更新你的网页。 大多数开发者都是使用jQuery框架中封装好的方法 $.ajax 来发送异
express中跨域访问设置
thrt520asd的博客
11-18 405
express中跨域访问设置，在express中加入即可 app.all('*', function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行 res.header('A...
nodejs express中设置请求头允许跨域，自定义了请求头，就会多发送一次options请求
艾小逗
12-02 6572
nodejs express中设置请求头允许跨域 设置请求头允许跨域请求 app.js 文件中添加 代码 var app = express(); app.all('*', function (req, res, next) { // 设置请求头为允许跨域 res.header('Access-Control-Allow-Origin', '*'); // 设置服务器支持的所有头信息...
前端开发：jQuery AJAX实现跨域请求详解
"jQuery使用ajax跨域请求获取数据" 在Web开发中，跨域（Cross-Origin）是指一个域下的文档或脚本尝试请求另一个域上的资源。由于浏览器的安全策略，同源策略（Same-origin policy）限制了JavaScript的这种行为，以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值