关于 ajax 和node 的跨域

最新推荐文章于 2023-09-05 13:28:09 发布
最新推荐文章于 2023-09-05 13:28:09 发布
阅读量356 收藏
点赞数
分类专栏： Javascript学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiaoqi6132/article/details/104462475
版权

首先，你要明白，ajax 是不允许跨域，除非说你的服务器允许跨域。为什么游览器可以，因为ajax 是运行在游览器上的。游览器厂商规定的。不行就是不行。

游览器代码不变

// function reqListener () {
//     console.log(this.responseText);
// }
//
// var oReq = new XMLHttpRequest();
// console.log(1);
// oReq.addEventListener("load", reqListener);
// console.log(2);
// oReq.open("GET", "http://127.0.0.1:8088/");
// // oReq.setRequestHeader('Access-Control-Allow-Origin':'www.baidu.com');
// console.log(3);
// oReq.send();
// console.log(4);
var xhr= new XMLHttpRequest(),
    method = "GET",
    url = "http://127.0.0.1:8088/";

xhr.open(method, url, true);
xhr.addEventListener('load',()=>{
    //console.log(xhr.response);
});
// xhr.overrideMimeType('text/xml');
xhr.setRequestHeader('Content-Type','text/html');

xhr.onreadystatechange = function () {
    console.log(XMLHttpRequest.DONE)
    if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        console.log(xhr.getAllResponseHeaders())
        console.log(xhr.responseText);
        console.log(xhr.responseType);
        console.log(xhr.responseXML);
    }
};
//xhr.withCredentials = true;
xhr.send();

目录

 

 

第一种情况：任何的跨域允许都不加

首先服务器代码：

 

在服务器显示请求头中就会报出这个：

在游览器中的显示：

2.我加上    res.setHeader("access-control-allow-origin","*");

 服务器：

服务器显示：

游览器显示：

3.加上res.setHeader('Access-Control-Allow-Headers','*');

游览器显示完全了

服务器显示：

 

第一种情况：任何的跨域允许都不加

首先服务器代码：

const http = require("http");
const fs = require("fs");
const url = require("url");
const querystring = require("querystring");


let data = '成功开启服务';
fs.writeFile('文件.txt', data, 'utf8',(err) => {
    if (err) throw err;
    console.log('日志已经输出');
});

let server = http.createServer(function (req,res) {

    let arr = req.url.toString().split('/');
    let arr1 = __dirname.toString().split('\\');
    const UrlArr = arr1.join('/');

    if(req.url === '/') {
        console.log(req.headers);
        fs.readFile('./server.html', (err, data) => {
            // res.setHeader("access-control-allow-origin","*");
            // res.setHeader('Access-Control-Allow-Headers','*');
            res.writeHead(200, {
                'Content-Type': 'text/html'
            });
            res.write(data,'document');
            res.end();
        })
    }
    else if(arr[1] === 'css'){
        fs.readFile(`${UrlArr}${req.url}`, (err, data) => {
            // res.setHeader("access-control-allow-origin","*");
            // res.setHeader('Access-Control-Allow-Headers','*');
            res.writeHead(200, {
                'Content-Type': 'text/css'
            });
            res.write(data, 'utf8');
            res.end();
        })
    }
    else if (arr[1] === 'js'){
        fs.readFile(`${UrlArr}${req.url}`, (err, data) => {
            // res.setHeader("access-control-allow-origin","*");
            // res.setHeader('Access-Control-Allow-Headers','*');
            res.writeHead(200, {
                'Content-Type': '*/*',

            });
            res.write(data, 'document');
            res.end();
        })
    }
    else if (arr[1] === 'images'){
        fs.readFile(`${UrlArr}${req.url}`, (err, data) => {
            // res.setHeader("access-control-allow-origin","*");
            // res.setHeader('Access-Control-Allow-Headers','*');
            res.writeHead(200, {
                'Content-Type': 'image/*'
            });
            res.write(data);
            res.end("结束");
        })
    }


});

server.listen(8088,'127.0.0.1',()=>{
    console.log('服务器开始监听！');
});

 

在服务器显示请求头中就会报出这个：

{
  host: '127.0.0.1:8088',
  connection: 'keep-alive',
  accept: '*/*',
  'access-control-request-method': 'GET',
  'access-control-request-headers': 'content-type',
  origin: 'null',
  'sec-fetch-mode': 'cors',
  'sec-fetch-site': 'cross-site',
  'user-agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.116 Safari/537.36',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'zh-CN,zh;q=0.9,be;q=0.8,en;q=0.7'
}

在游览器中的显示：

2.我加上    res.setHeader("access-control-allow-origin","*");

 服务器：

const http = require("http");
const fs = require("fs");
const url = require("url");
const querystring = require("querystring");


let data = '成功开启服务';
fs.writeFile('文件.txt', data, 'utf8',(err) => {
    if (err) throw err;
    console.log('日志已经输出');
});

let server = http.createServer(function (req,res) {

    let arr = req.url.toString().split('/');
    let arr1 = __dirname.toString().split('\\');
    const UrlArr = arr1.join('/');

    if(req.url === '/') {
        console.log(req.headers);
        fs.readFile('./server.html', (err, data) => {
             res.setHeader("access-control-allow-origin","*");
            // res.setHeader('Access-Control-Allow-Headers','*');
            res.writeHead(200, {
                'Content-Type': 'text/html'
            });
            res.write(data,'document');
            res.end();
        })
    }
    else if(arr[1] === 'css'){
        fs.readFile(`${UrlArr}${req.url}`, (err, data) => {
            // res.setHeader("access-control-allow-origin","*");
            // res.setHeader('Access-Control-Allow-Headers','*');
            res.writeHead(200, {
                'Content-Type': 'text/css'
            });
            res.write(data, 'utf8');
            res.end();
        })
    }
    else if (arr[1] === 'js'){
        fs.readFile(`${UrlArr}${req.url}`, (err, data) => {
            // res.setHeader("access-control-allow-origin","*");
            // res.setHeader('Access-Control-Allow-Headers','*');
            res.writeHead(200, {
                'Content-Type': '*/*',

            });
            res.write(data, 'document');
            res.end();
        })
    }
    else if (arr[1] === 'images'){
        fs.readFile(`${UrlArr}${req.url}`, (err, data) => {
            // res.setHeader("access-control-allow-origin","*");
            // res.setHeader('Access-Control-Allow-Headers','*');
            res.writeHead(200, {
                'Content-Type': 'image/*'
            });
            res.write(data);
            res.end("结束");
        })
    }


});

server.listen(8088,'127.0.0.1',()=>{
    console.log('服务器开始监听！');
});

服务器显示：

{
  host: '127.0.0.1:8088',
  connection: 'keep-alive',
  accept: '*/*',
  'access-control-request-method': 'GET',
  'access-control-request-headers': 'content-type',
  origin: 'null',
  'sec-fetch-mode': 'cors',
  'sec-fetch-site': 'cross-site',
  'user-agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.116 Safari/537.36',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'zh-CN,zh;q=0.9,be;q=0.8,en;q=0.7'
}

游览器显示：

3.加上res.setHeader('Access-Control-Allow-Headers','*');

游览器显示完全了

服务器显示：

{
  host: '127.0.0.1:8088',
  connection: 'keep-alive',
  accept: '*/*',
  'access-control-request-method': 'GET',
  'access-control-request-headers': 'content-type',
  origin: 'null',
  'sec-fetch-mode': 'cors',
  'sec-fetch-site': 'cross-site',
  'user-agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.116 Safari/537.36',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'zh-CN,zh;q=0.9,be;q=0.8,en;q=0.7'
}
{
  host: '127.0.0.1:8088',
  connection: 'keep-alive',
  'content-type': 'text/html',
  'user-agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.116 Safari/537.36',
  'sec-fetch-dest': 'empty',
  accept: '*/*',
  origin: 'null',
  'sec-fetch-site': 'cross-site',
  'sec-fetch-mode': 'cors',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'zh-CN,zh;q=0.9,be;q=0.8,en;q=0.7'
}

 

 

总结：

根据这样看来。ajax 中setresponse 是单独给发一次请求。

树根朽木
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
node.js ajax数据请求跨域问题
唯一的切慕，唯一的诗歌……
03-01 4994
最近想用node作为后台抛出接口，前端页面去请求接口的时候报错了，发现是跨域的问题。为什么会出现跨域问题呢？我们就需要了解什么是浏览器的同源策略。 什么是浏览器的同源策略，为什么要同源策略 同源策略简单来说就是三同，同协议、同域名、同端口。个域内的脚本仅仅具有本域内的权限，可以理解为本域脚本只能读写本域内的资源，而无法访问其它域的资源。这种安全限制称为同源策略，有同源策略的原因就在于为了提...
NodeJs中Ajax跨域问题分析
Science Explorer
08-25 5758
一、跨域分析 1、什么是跨域请求？ 由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。在Ajax中，表现为浏览器请求url和nodels开启的server服务中host和port不一致。如下图所示： 2、跨域问题分析 造成跨域访问受限的原因是浏览器中同源策略机制。 如果url中端口（如果有指定）和域名都相同，则他们具有相同的源 如果u...
前端ajax跨域问题及基于node的跨域解决方案
意夏的博客
07-21 507
跨域的概念及产生 概念 跨域：跨域名（网址）访问； 报错显示：No ‘Access-Control-Allow-Origin’ 浏览器的同源策略 （1）浏览器的同源策略：同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。受到请求的 URL 的域必须与当前 Web 页面的域相同； （2）同源策略是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响； ...
ajax携带请求头，后端的拦截器无法拿到请求头的原因
Ting1king的博客
11-09 1784
环境 springboot ajax 谷歌浏览器 我看了网上很多文章，都是说ajax会发送一个预检请求，然后发送的是OPTION的方法，不会携带任何数据，所以需要放行这个预检请求，但是我自己走断点看，他第一个请求都是GET方法，我不知道为什么 我用的是谷歌浏览器来发送请求头的，然后就出现一个非常奇怪的问题，拦截器拿不到请求头，但是控制器可以拿到请求头的数据,我试了很久，然后我换IE浏览器，将他的安全级别设置最低，然后就可以拿到请求头了，神奇的事情发生了，我的谷歌浏览器也可以了 拦截器代码： @Overr
ajax跨域问题
sayyy的专栏
11-01 858
浏览器的同源策略 浏览器的同源策略参考这里，这里，这里。 源(origin)：协议(比如：http)、域名(比如：localhost)、端口号(比如：8080)共同表示一个源。 同源：协议、域名、端口号相同。 同源策略（same origin policy）：它是一个重要的安全策略，用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。 同源策略是由w3c为浏览器指定的一个策略，它能帮助阻隔恶意文档，减少可能被攻击的媒介。 什么是跨域问题? 跨域问题来源于浏览器的"同源策略"(即
Node.js配合node-http-proxy解决本地开发ajax跨域问题
12-23
前后端分离，本地前端开发调用接口会有跨域问题，一般有以下3种解决方法： 1. 后端接口打包到本地运行（缺点：每次后端更新都要去测试服下一个更新包，还要在本地搭建java运行环境，麻烦） 2. CORS跨域：后端接口...
Vue-resource实现ajax请求和跨域请求示例
08-31
Vue-resource是Vue.js框架的一个插件，主要用于实现AJAX（异步JavaScript和XML）请求和处理跨域问题，从而方便前后端的数据交互。Vue-resource提供了与jQuery中的$.ajax类似的功能，使得开发者能够轻松地向服务器...
postman报错Error: connect ECONNREFUSED 127.0.0.1:8088
weixin_55229531的博客
06-11 2万+
postman报错Error: connect ECONNREFUSED 127.0.0.1:8088
tomcat启动成功，但是无法访问127.0.0.1:8080打开tomcat首页
热门推荐
wdxgj123的博客
06-07 6万+
tomcat启动成功，但是无法访问127.0.0.1:8080打开tomcat首页 记录一下自己的错误：8080端口被占用 1.打开运行输入cmd 2.输入netstat -ano（注意中间是空格） 3.查看端口8088对应的PID，记好PID号如3368 4.打开任务管理器，将对应的结束任务。 重新访问127.0.0.1:8080即可。 此方法仅适合8080端口被占用引起的错误。 ...
前端跨域解决方案总结
丑小鸭变黑天鹅的博客
02-20 4611
前端跨域解决方案总结一、什么是跨域？二、为什么会产生跨域三、常见的跨域场景四、9种跨域解决方案1、JSONP跨域1、概述2、实现流程3、jsonp简单实现1)、原生JS实现2）jquery Ajax实现：3）Vue axios实现：4)、后端node.js代码：2、跨域资源共享（CORS） 一、什么是跨域？ 在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。 二、为什么会产生跨域 因为浏览器内部有一种约定叫做同源策略它是浏览器最核心也最基本的安全功能，如果缺少了同源
jquery插件:ajax和iframe加载提示效果
03-29
这是本人发布的第一个jquery插件,有什么意见可以提,我csdn博客里有使用说明.
获取元数据和隔离策略
allway2的博客
09-05 1878
创建了一个小测试页。否则，使用尚不支持获取元数据的浏览器的人将无法访问您的网站。获取元数据标头是一种相对较新的浏览器安全功能，您可以在 Web 应用程序中使用它来防止前所未有的客户端攻击。获取元数据标头是一项出色的浏览器功能，它使开发人员能够以前所未有的方式保护 Web 应用程序。实施有效的策略很简单，并且可以轻松地放宽以适应任何特殊需求，例如允许框架或来自子域的交互。根据浏览器的不同，浏览器支持仍然缺乏或处于试验阶段，但标头已经可以向后兼容的方式使用。如果目标来自不同的来源，使用此模式的请求将失败。
ajax node 解决跨域问题
weixin_45822952的博客
06-02 183
var express = require('express'); var app = express(); //设置跨域访问 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods
JavaScript请求数据的4种方法总结（Ajax、fetch、jQuery、axios）
激情人生，美好生活
08-17 7144
JavaScript请求数据有4种主流方式，分别是Ajax、fetch、jQuery和axios。
web靶场——xss-labs靶机平台的搭建和代码审计
weixin_51525416的博客
09-05 5537
web靶场-xss-labs靶机平台的搭建和代码审计
通过Jsoup发送Request Payload方式的Ajax post请求
_
11-14 1502
最近在做一个旅游类的网站，在使用爬虫时，发现某程网站上某一个景点的用户评论这部分数据是通过Ajax异步请求动态加载的，首先通过Chrome跟踪异步请求，发现有两次请求， 前一次请求方法的OPTION,后一次请求才是POST而且返回目标数据，不过两次请求的url是一样的，直接在地址栏输入url返回的是没有用户评论信息的json格式的数据， 这说明某程服务器并没有接收到可用的...
爬取ajax数据，根据url却无法得到response信息的解决方法
wg5foc08的博客
09-01 3681
房天下网站租房信息数据加载为动态js加载，分析页面的请求，找到ajax请求的url： https://m.fang.com/zf/?purpose=%D7%A1%D5%AC&notGetPurpose=1&city=%B9%E3%D6%DD&renttype=cz&c=zf&a=ajaxGetList&city=gz&r=0.00219856...
前端常用ajax请求整理
jagger_guo的博客
04-12 4796
ddddddd
(四）基于Python面向对象简单爬虫Ajax数据爬取---今日头条图片数据
Xiaoyeforever的博客
01-05 545
一、Ajax简介 Ajax = 异步JavaScript和 XML 或者是 HTML（标准通用标记语言的子集）。 Ajax 是一种用于创建快速动态网页的技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 二，基本库 import requests #构...
用AJAX传值是不是跨域
最新发布
08-14
是的，使用Ajax进行数据交互默认情况下会受到同源策略的限制，也就是所谓的跨域问题。同源策略规定了JavaScript只能访问来自同一源...4. **Node.js中间件** 或者 **Express等** 后端框架，提供API接口供前端跨域访问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值