NodeJs中Ajax跨域问题分析

最新推荐文章于 2025-07-01 10:00:16 发布
原创 最新推荐文章于 2025-07-01 10:00:16 发布 · 5.8k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Ajax #跨域 #NodeJs #JavaScript

本文分析了浏览器的同源策略导致的Ajax跨域问题，通过具体案例展示了跨域现象，并提供了四种类解决方案：调整域名、jsonp、CORS以及Nginx反向代理。其中，CORS是推荐的现代解决方案，而jsonp适用于不支持CORS的旧版浏览器。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、跨域分析

1、什么是跨域请求？

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。在Ajax中，表现为浏览器请求url和nodels开启的server服务中host和port不一致。如下图所示：
这里写图片描述
2、跨域问题分析

造成跨域访问受限的原因是浏览器中同源策略机制。

如果url中端口（如果有指定）和域名都相同，则他们具有相同的源
如果url中端口（如果有指定）和域名有差别，则他们属于不同的源
在发送Ajax请求时，浏览器就会对跨域的请求做出限制

这里写图片描述
这里写图片描述

二、跨域案例

1、跨域的实例代码

server.js

const http = require("http")
const config = require("../config/config")
const fs = require("fs");
const server = http.createServer((requestMsg,response)=>{
    if(requestMsg.url === "/"){
        fs.readFile("./html/ajax.html",(err,data)=>{
            response.writeHead(200,"OK",{
                "Content-type":"text/html",
            })
            response.end(data);
        })
    }else if(requestMsg.url === "/?"){
        response.writeHead(200,"GET",{
            "Content-Type": "text/html; charset=utf-8"
        })
        response.end("处理GET请求");
    }else{
        response.writeHead(500, "Invalid Request", {"Content-Type": "text/html; charset=utf-8"});
        response.end("无效请求");
    }
})

server.listen(config.port,config.host,()=>{
    console.log(`server starting at ${config.host}:${config.port}`)
})

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--http通过from请求数据-->
<!--<form action="http://127.0.0.1:8080" method="get">-->
    <!--<input type="submit" value="提交" id="ajaxBtn">-->
<!--</form>-->

<!--ajax请求数据-->
<form >
    <input type="submit" value="提交" id="ajaxBtn">
</form>
</body>
<script>

    window.onload = ()=>{
        const ajaxBtn = document.querySelector("#ajaxBtn");
        ajaxBtn.addEventListener("click",(ev)=>{
            ev = ev||event;
            ev.preventDefault();
            makeRequest("GET","http://127.0.0.1:8080")
        })

        function makeRequest(method,url) {
         const   httpRequest = new XMLHttpRequest();

            if (!httpRequest) {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                return false;
            }
            httpRequest.onreadystatechange =()=>{
                if (httpRequest.readyState === XMLHttpRequest.DONE) {
                    if (httpRequest.status === 200 || httpRequest.status === 304) {
                        alert(httpRequest.responseText);
                        console.log(httpRequest.responseText)
                    } else {
                        alert('There was a problem with the request.');
                    }
                }
            };

            httpRequest.open(method,url);
            httpRequest.send();
        }


    }

</script>
</html>

2、跨域问题表现：

1）使用webstorm自身浏览器造成的跨域问题。
这里写图片描述
2）请求url(http://localhost:8080/)不同造成的跨域问题。
这里写图片描述

三、跨域解决方案

在web开发中，当使用第三方框架时，不可避免要出现跨域问题。那么如何解决跨域访问受限？提供以下四种方案参考。

1、如果可以同时控制前后端，可以通过控制域名来解决跨域。不推荐。

server.listen(config.port,config.host,()=>{//nodojs开启的服务
    console.log(`server starting at ${config.host}:${config.port}`)
})

//客户端请求url
makeRequest("GET","http://127.0.0.1:8080")

2、jsonp——JSON width Padding(非官方的跨域解决方案)
原理：利用script标签中的src是不会受同源策略限制的特点来完成跨域请求。
此种方案由前端发起，后端配合。
server.js的代码：

const http = require("http")
const config = require("../config/config")
const fs = require("fs");
const server = http.createServer((requestMsg, response) => {

    if (requestMsg.url === "/") {
        fs.readFile("./html/ajax.html", (err, data) => {
            response.writeHead(200, "OK", {
                "Content-type": "text/html",
            })
            response.end(data);
        })
    } else if (requestMsg.url === "/ky") {
        response.writeHead("200", "OK", {
            "Content-type": "application/x-javascript;charset=utf-8"
        })
        //利用script标签中的src是不会受同源策略限制的特点来完成跨域请求。
        response.end(`fn("123")`);

    } else if (requestMsg.url === "/?") {
        response.writeHead(200, "GET", {
            "Content-Type": "text/html; charset=utf-8"
        })
        response.end("处理GET请求");
    } else {
        response.writeHead(500, "Invalid Request", {"Content-Type": "text/html; charset=utf-8"});
        response.end("无效请求");
    }
})

server.listen(config.port, config.host, () => {
    console.log(`server starting at ${config.host}:${config.port}`)
})

ajax.html

<script>

    function fn(data){
        console.log(data)
    }

    window.onload=function () {

        const ajaxBtn = document.querySelector("#ajaxBtn");
        ajaxBtn.addEventListener("click",(ev)=>{
            ev = ev||event;

            const scriptNode = document.createElement("script");
            scriptNode.src="http://127.0.0.1:8080/ky"
            document.body.appendChild(scriptNode);

            ev.preventDefault();
        })
    }
</script>

如上所示：
html添加如下数据处理代码并告诉服务端：

  function fn(data){
        console.log(data)
    }

server响应：

 response.end(`fn("123")`);

测试结果：
这里写图片描述
3、CORS——Access-Control-Allow-Origin

1）原理：Access-Control-Allow-Origin 响应头指定了该响应的资源是否被允许与给定的origin共享。
2）语法：

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: <origin>
参数 origin
            origin：指定一个可以访问资源的URI

origin
请求首部字段 Origin 指示了请求来自于哪个站点。

3)实现

if(requestMsg.url === "/ky"){//cors
        let   corsUrl = "";
        if(requestMsg.headers["origin"] === "http://127.0.0.1:63342"){
            corsUrl = "http://127.0.0.1:63342";
        }else if(requestMsg.headers["origin"] === "http://localhost:63342"){
            corsUrl = "http://localhost:63342";
        }
        response.writeHead(200,"OK",{
            "Content-type":"application/x-javascript",
            "Access-Control-Allow-Origin":corsUrl,
        })
        response.end("123");
    }

4)CORS优化——预请求验证

本质上在跨域处理这一块，CORS还有一些其他的设置。
允许的http方法：
除了GET HEAD POST外其他方法是不允许的
请求头的限制：
自定义请求体是不允许的。
实现方案 

Access-Control-Allow-Headers：
                            响应首部 Access-Control-Allow-Headers 用于预检请求，代表允许跨域的请求头
Access-Control-Allow-Methods：
                            响应首部 Access-Control-Allow-Methods用于预检请求，代表允许跨域的http方法
Access-Control-Max-Age：
                        The Access-Control-Max-Age 这个响应首部表示预检请求的返回结果（即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息） 可以被缓存多久

5)代码实现：
server.js

const http = require("http")
const config = require("../config/config")
const fs = require("fs");

const server = http.createServer((requestMsg,response)=>{
    if(requestMsg.url === "/"){
        fs.readFile("../html/ajax.html",(err,data)=>{
            response.writeHead(200,"OK",{
                "Content-type":"text/html",
            })
            response.end(data);
        })
    }else if(requestMsg.url === "/ky"){//cors
        let   corsUrl = "";
        if(requestMsg.headers["origin"] === "http://127.0.0.1:63342"){
            corsUrl = "http://127.0.0.1:63342";
        }else if(requestMsg.headers["origin"] === "http://localhost:63342"){
            corsUrl = "http://localhost:63342";
        }
        response.writeHead(200,"OK",{
            "Content-type":"application/x-javascript",
            "Access-Control-Allow-Origin":corsUrl,
        })
        response.end("123");
    }else if(requestMsg.url === "/cors"){//cors优化，加入预请求验证
        let   corsUrl = "";
        if(requestMsg.headers["origin"] === "http://127.0.0.1:63342"){
            corsUrl = "http://127.0.0.1:63342";
        }else if(requestMsg.headers["origin"] === "http://localhost:63342"){
            corsUrl = "http://localhost:63342";
        }
        response.writeHead(200,"OK",{
            "Content-type":"application/x-javascript",
            "Access-Control-Allow-Origin":corsUrl,
            "Access-Control-Allow-Headers":"zd",
            "Access-Control-Allow-Methods":"PUT,DELETE",
            "Access-Control-Max-Age":"10"
        })

        response.end("123");
    }else if(requestMsg.url === "/?"){
        response.writeHead(200,"GET",{
            "Content-Type": "text/html; charset=utf-8"
        })
        response.end("处理GET请求");
    }else{
        response.writeHead(500, "Invalid Request", {"Content-Type": "text/html; charset=utf-8"});
        response.end("无效请求");
    }
})

server.listen(config.port,config.host,()=>{
    console.log(`server starting at ${config.host}:${config.port}`)
})

ajax.html

<body>
<!--http通过from请求数据-->
<form action="http://127.0.0.1:8080" method="get">
    <input type="submit" value="提交" id="ajaxBtn">
</form>


</body>
<script>

    window.onload=function () {

        const ajaxBtn = document.querySelector("#ajaxBtn");
        ajaxBtn.addEventListener("click", (ev) => {
            ev = ev || event;

            const xhr = new XMLHttpRequest();
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200 || xhr.status == 304) {
                        alert(xhr.responseText)
                        console.log(xhr.responseText);
                    }
                }
            }
            xhr.open("GET", "http://127.0.0.1:8080/cors");
            xhr.send();


            ev.preventDefault();
        })
    }
</script>

6)测试结果：
这里写图片描述

4、Nginx反向代理

ajax跨域携带token,HTTP解决跨域问题，成功解决Ajax跨域获取不到后端传送的Token...
weixin_29001655的博客
08-05 1230
首先我们考虑后端是够允许跨域请求，本人编写了一个过滤器代码如下：package com.rbac.filter;import java.io.IOException;import java.io.OutputStream;import javax.servlet.Filter;import javax.servlet.FilterChain;import javax.servlet.FilterC...
node.js ajax数据请求跨域问题
唯一的切慕，唯一的诗歌……
03-01 5069
最近想用node作为后台抛出接口，前端页面去请求接口的时候报错了，发现是跨域的问题。为什么会出现跨域问题呢？我们就需要了解什么是浏览器的同源策略。 什么是浏览器的同源策略，为什么要同源策略 同源策略简单来说就是三同，同协议、同域名、同端口。个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略，有同源策略的原因就在于为了提...
nodeJs 跨域请求
05-18
使用nodeJs构建请求服务，前端页面进行访问，可以跨域请求
JavaScript跨域问题的解决之道
最新发布
weixin_29903713的博客
07-01 878
同源策略（Same-Origin Policy）是Web浏览器的一项安全机制，用于限制一个源（Origin）加载或操作另一个源的文档或脚本。源被定义为协议、域名和端口号的组合。例如，协议、域名（包括子域名）和端口完全相同的两个URL被认为同源。此策略确保了用户信息的安全，防止恶意脚本窃取数据或造成其他安全问题。在解决跨域问题的过程中，实际案例的分析与经验分享对于理解问题的本质以及寻找解决方案至关重要。这里，我们将探讨一个真实的案例，并从中提炼出解决跨域问题的最佳实践。
Nodejs教程18：Ajax跨域
weixin_33682790的博客
03-10 147
阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。 Ajax跨域问题的产生原因 Ajax请求无法跨域，在前端开发中是个常见问题，它的产生原因是，在浏览器接收服务端返回数据时，会检查该数据是否和当前发起请求的网址在同一域名下。若不是，则会丢弃该数据，并返回一个跨域错误。 在Ajax请求中，遵循如下流程： 网页提交一个Ajax请求到浏览器，浏览器将请求发至服务器，服务器接收到请求后，返回...
JS 解决跨域汇总
音韵者天
04-24 7785
什么是跨域？在了解跨域之前，首先要知道什么是同源策略（same-origin policy）。简单来讲同源策略就是浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，禁止不同域之间的JS进行交互。对于浏览器而言只要域名、协议、端口其中一个不同就会引发同源策略，从而限制他们之间如下的交互行为： Cookie、LocalStorage 和 IndexDB 无法读取。 DOM 无法获得。 AJAX 请求
Node.js配合node-http-proxy解决本地开发ajax跨域问题
12-23
2. CORS跨域：后端接口在返回的时候，在header中加入’Access-Control-Allow-origin’:* 之类的（有的时候后端不方便这样处理，前端就蛋疼了） 3. 用nodejs搭建本地http服务器，并且判断访问接口URL时进行转发，...
nodejs搭建本地服务器轻松解决跨域问题
10-18
在本文中，我们将深入探讨如何使用Node.js搭建本地服务器来轻松解决跨域问题。跨域问题通常发生在浏览器的安全策略之下，限制了JavaScript从一个源（协议+域名+端口）发送Ajax请求到另一个源。然而，开发过程中经常...
nodejs服务解决跨域问题
10-17
Node.js服务处理跨域问题通常涉及到HTTP请求头中的`Access-Control-Allow-Origin`字段。浏览器出于安全考虑，不允许同源策略限制下的页面从其他来源获取资源，特别是JavaScript发起的Ajax请求。当Node.js服务器作为...
node跨域问题
xieyixiao_123的博客
09-26 259
最近正在做一个前后端分离的项目，涉及的便是跨域的问题，然而在网上查到的资料都是： 其结果呢，一直报这个错。 接着呢，说要通过nigix设置，也还是行不通。 索性，找了一阵子，终于找到这段代码：   var app=express(); app.all('*',function (req, res, next) { res.header('Access-Cont
nodejs ajax跨域
u010957293的专栏
06-19 1098
在一个项目上想用NodeJS，所以边学边练。第一个遇到的问题就是跨域访问控制问题。很多初学者会遇到同样问题。问题在前端的JS（http://localhost/xxx）中ajax访问后端RestAPI(http://localhost:3000/….)时(Chrome)报错：XMLHttpRequest cannot load http://localhost:3000/auth/xxx/xxx.
Nodejs Express Ajax跨域请求
米高的博客
04-01 3967
var express = require('express'); var app = express();var bodyParser = require('body-parser');//说明下：因为下面要用到res.body获取到前端传过来的参数，用res.body的前提是首先导入body-parser //跨域处理:app.all('*',function (req, res, next
原生JS实现ajax与ajax的跨域请求
weixin_30607659的博客
11-12 272
一、原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步：设置状态监听函数 第三步：open一个连接，true是异步请求 第四部：send一个请求，可以发送一个对象和字符串，不需要传递数据发送null 第五步：在监听函数中，判断readyState=4&&status=200表示请求成功 第六步：使用responseText、responseXML接...
ajax跨域
深圳古先生的博客
05-29 203
被这个坑太多次了，55555后台加：header('Access-Control-Allow-Credentials: true'); header("Access-Control-Allow-Origin: *");//允许ajax跨域 header('Access-Control-Allow-Methods:GET, POST, OPTIONS'); 前端ajax代码：$.ajax({ ...
JS - Ajax 跨域篇
01-01 560
1、浏览器的限制：当浏览器发现你的请求是跨域的时候，会做校验，如果校验不通过，将会报跨域安全问题。浏览器多管闲事, get请求能正常返回，但是浏览器会报错；说明后台是没问题的，只是浏览器的限制问题。 2、跨域：发出去的请求只要域名，端口，协议中有一个不同，都会产生跨域。 3、发送的是xhr（XMLHTTPRequest）请求，如果发送的不是xhr请求，就算是跨域，浏览器也不会报错。 4、...
前端ajax跨域问题及基于node的跨域解决方案
意夏的博客
07-21 555
跨域的概念及产生 概念 跨域：跨域名（网址）访问； 报错显示：No ‘Access-Control-Allow-Origin’ 浏览器的同源策略 （1）浏览器的同源策略：同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。受到请求的 URL 的域必须与当前 Web 页面的域相同； （2）同源策略是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响； ...
js ajax跨域js代码
huangmin2050的专栏
11-30 574
function handler_message(r) {         alert('a-------a');         document.getElementsByTagName('head')[0].removeChild(document.getElementById('loading_message'));         }         function poll_
JS的跨域处理
华府名安小书童的博客
03-26 249
Js不可以跨域请求数据。什么是跨域：1、域名不同2、域名相同端口不同。解决js的跨域问题可以使用Jsonp，使用js的特性绕过跨域请求。Js可以跨域加载js文件。原理图：实现方法：ajax中要注意的地方（一定要加  dataType ）：$.ajax({    url : "http://localhost:8088/user/token/" + _ticket,    dataType : "j...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值