NodeJs中Ajax跨域问题分析

最新推荐文章于 2024-07-17 00:09:12 发布

Blockchain Explorer

最新推荐文章于 2024-07-17 00:09:12 发布

阅读量5.7k

点赞数 1

分类专栏： JavaScript/ES6/NodeJS 文章标签： Ajax 跨域 NodeJs JavaScript

本文链接：https://blog.csdn.net/TDCQZD/article/details/82047632

版权

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

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

一、跨域分析

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>

最低0.47元/天解锁文章

Blockchain Explorer

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
NodeJs中Ajax跨域问题分析

一、跨域分析1、什么是跨域请求？由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。在Ajax中，表现为浏览器请求url和nodels开启的server服务中host和port不一致。如下图所示： 2、跨域问题分析造成跨域访问受限的原因是浏览器中同源策略机制。如果url中端口（如果有指定）和域名都相同，则他们具有相同的源如果u...
复制链接

扫一扫

专栏目录