ajax跨域问题:No ‘Access-Control-Allow-Origin‘ header is present on the requested resource_jq ajaxby cors policy: no 'access-control-allow-or-程序员宅基地

技术标签: node.js  js  

今天在学习Ajax时,客户端发送请求总是报错。
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
我是用的是nodemon 和 express 框架来测试ajax请求。
以下是代码部分:

/* app.js */
//引入express框架
const express = require('express');
//引入路径处理模块
const path = require('path')
//创建web服务器
const app = express();

//静态资源访问服务器功能
app.use(express.static(path.join(__dirname, 'public')));
app.get('/first', (req,res) => {
    
    res.send('你好,这里是服务器,我收到了你的ajax请求');
    console.log('有请求发来,已响应');
});
//监听端口
app.listen(3000);
console.log('服务器启动成功')
/* demo04.html */
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个ajax网页</title>
</head>

<body>
    <script type=text/javascript>
        // 创建ajax对象
        var xhr = new XMLHttpRequest();
        // 给对象安排方式和发送地址
        xhr.open('get', 'http://localhost:3000/first');
        console.log('准备发送:');
        // 发送请求
        xhr.send();
        console.log('已发送');
        // 获取响应的数据
        xhr.onload = function () {
    
            // xhr.responseText
            console.log('收到了服务器的内容:');
            console.log(xhr.responseText);
        };
        // console.log(1);
    </script>
</body>

</html>

仔细检查了代码,发现没有问题,服务器端也可以正常响应,但是客户端总是报错。
我在根据报错信息搜索了有关问题,发现如下一篇文章。跨域详解 been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource
问题所在:
我使用了live Server 插件打开的demo04.html,live Server使用5500端口,而express监听3000端口,5500端口向3000端口请求资源,是跨域访问资源问题。
浏览器为了安全,限制了本站点。

上面的意思就是 你访问一个什么地址被CORS 协议阻止, 没有 在Hearder 里面发现 Access-Control-Allow-Origin 的参数的 资源

跨域问题的原因:浏览器出于安全考虑,限制访问本站点以为的资源。

比如你有一个 网站 127.0.0.1:8080/ , 并且上面挂了一个页面 ,那么在这个页面中 ,你只访问 本站点的 资源不会受到限制,但是你如果访问其他站点,比如 127.0.0.1:8081 的资源就会受到限制。

解决方法:
使用express监听的: http://localhost:3000/ 后跟路由访问文件目录即可。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dongliang3164/article/details/113721972

智能推荐

Matlab图片插入word文档的几种方法(清晰不失真导出matlab图形)_matlab图片导入word-程序员宅基地

Matlab导出图片模糊的解决办法一、直接复制图窗(针对图形中线条较少时)matlab中的fig文件>>>>编辑>>>>复制图窗到word中粘贴即可二、另存为emf文件(针对图形中线条较多)matlab中的fig文件>>>>文件>>>>导出设置(设置导出分辨率和字体)再另存为emf文件到word中插入图片(.emf文件)..._matlab图片导入word

[Opencv]Cascade级联分类器_级联分类器和深度学习的区别-程序员宅基地

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言 一、训练分类器 二、使用步骤 1.引入库 2.读入数据 总结前言最近在尝试识别指定物体,之前用Opencv自带的级联分类器做过人脸识别感觉效果不错,所以想用级联分类器来做其它物体的识别。 选择学习这种传统目标检测算法,主要是迎合电赛上的需求。虽然深度学习算法已经有许多种,但在树莓派这样没有GPU加速的平台上运行的帧率并不理想,做不到实时性。而Cascad..._级联分类器和深度学习的区别

通信控件MSComm使用详解-程序员宅基地

MSComm 控件通过串行端口传输和接收数据,为应用程序提供串行通讯功能。MSComm控件在串口编程时非常方便,程序员不必去花时间去了解较为复杂的API函数,而且在VC、VB、Delphi等语言中均可使用。 Microsoft Communications Control(以下简称MSComm)是Microsoft公司提供的简化Windows下串行通信编程的ActiveX控件,它为应用程序提供了...

python使用setup.py安装后如何卸载_python setup.py uninstall-程序员宅基地

2012-09-08 21:42 by JustRun, 3984 阅读, 2 评论, 收藏, 编辑我们尝尝使用 python setup.py install 来安装python包,但是如何卸载呢? 只能手动删除安装的文件可以使用如下命令python setup.py install --record files.txt 记录安装后文件的路径cat files.txt | xargs rm -r..._python setup.py uninstall

I.MX6ULL裸机驱动开发四种方式总结_imx6ull裸机开发不能单步调试-程序员宅基地

学习裸机驱动开发也有一阵子,终于是把几种裸机驱动方法学完了,总体来说难度并不大。因为毕竟有基础在,能大概看懂数据手册和知道如何是控制寄存器。驱动方法目前所学共有四种:1.纯汇编驱动2.汇编驱动头文件,剩下的使用C语言来驱动3.模仿STM32的方式来进行驱动4.移植NXP的官方SDK来进行驱动四种方法有共同点和不同点,下面我来 一 一总结:共同点: 1.无论怎么样,都必须使用汇编语言来启动头文件。选择..._imx6ull裸机开发不能单步调试

Unity 使用百度AI开放平台 实现文字转语音效果_tsn.baidu.com-程序员宅基地

Unity 文字转语音 实时播放整体很简单,只需要简单的搭载使就用就可以了。废话不多说了 直接上代码。using System.Collections;using System.Collections.Generic;using UnityEngine;using UnityEngine.Networking;/// <summary>/// 文字转语音/// ..._tsn.baidu.com

随便推点

python中用于绘制各种图形的区域称作_如何用python绘制各种图形-程序员宅基地

展开全部1.环境系统:windows10python版本:python3.6.1使用2113的库5261:matplotlib,numpy2.numpy库产生随机数几种方法import numpy as npnumpy.randomrand(d0, d1, ..., dn)In [2]: x=np.random.rand(2,5)In [3]: xOut[3]:array([[ 0.8428655..._python面板各区域怎么叫

关于C/C++的整型提升-程序员宅基地

C++在进行运算操作时的整型提升问题,记录一下。整型提升(Integral Promotion):K&R C中关于整型提升(integral promotion)的定义为:"A character, a short integer, or an integer bit-field, all either signed or not, or an object of enumeration type...

开启vs“启用内部函数”的一处小注意点-程序员宅基地

在我编译miniblink的vc6模式的时候,我发现关闭“启用内部函数”后,_byteswap_ulong就提示找不到,无法链接了。开启就没事。看来这玩意是vs自己inline实现的..._启用内部函数

python在csv文件中写入中文_蓝兰懒的博客-程序员宅基地

使用python版本 2.7,2.7中很多文件格式是没有encoding的,所以导致中文乱码,本文共说明两方面1.要写的中文内容;2.使用unicodecsv库去写入中文1.中文内容格式csv中写入的内容,先放到列表中,再将内容写到文件里,内容如下:list = [u"第一列标题",u"第二列标题"]con = [u"第一列内容",u"第二列内容"]list和con是要写入到文件中的内容,字符串前面记者要写U2.写入到csv中使用unicodecsv库,将汉语写入到文件中import c

sklearn中各种分类方法-程序员宅基地

### Multinomial Naive Bayes Classifier from sklearn.naive_bayes import MultinomialNBclf = MultinomialNB(alpha=0.01)clf.fit(train_x, train_y)### KNN Classifier from sklearn.neighbors import ...

2019全国大学生数学建模竞赛省一等奖经验总结(大佬轻喷)_数学建模省级三等奖有用吗-程序员宅基地

2019全国大学生数学建模竞赛省三等奖经验总结前言现在已经是2021年了,距离我数学建模获奖已经过去差不多2年了,但还是想记录下来给自己留下点什么。先上图吧怕碰到熟人,匿了匿了。虽然只拿了省一,但我学校算二本学校,这个成绩已经是当年我学校最好的成绩了。赛前准备其实我当时数学建模类的技术积累是不多的,之前几乎没有专门学过数学建模的算法,在校赛时的成绩也是三等奖刚刚晋级的水平。而且学校也不好,是一个二本学校,高数概率论线性代数刚及格水平。可能比普通同学有的优势是在机器学习、深度学习和计算机视觉上的_数学建模省级三等奖有用吗