nodejs搭建本地服务器轻松解决跨域问题


Posted in NodeJs onMarch 21, 2018

最近把以前用jquery写的一个小demo拿出来运行的,刚开始的时候忘了开启本地服务导致控制台一直报XMLHttpRequest cannot load file:///C:/Users/79883/Desktop/ajax/data.json?{%22username%22:%22lcl@qq.com%22,%22pwd%22:%22Home20170702%22}. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.然后我就去启动自己写的server.js服务器,在这过程中,感觉这种方式挺麻烦的,就一直去尝试了其它的方式什么去改浏览器属性等都试过了但是都没有解决跨域问题,最终得出两种有效方式,在这里我就把这两种方式一起介绍大家。

一、使用 Node 创建 Web 服务器

注:Node.js 提供了 http 模块,http 模块主要用于搭建 HTTP 服务端和客户端,下面就是简单的服务器实现过程:

1、编写服务器代码server.js

var http = require('http'); 
var fs = require('fs');//引入文件读取模块 
var documentRoot = 'C:/Users/79883/Desktop/jquery/ajax';//需要访问的文件的存放目录 
var server= http.createServer(function(req,res){ 
  //客户端输入的url,例如如果输入localhost:8888/index.html 
 //那么这里的url == /index.html 
 var url = req.url; 
 var file = documentRoot + url; 
 console.log(url); 
 fs.readFile( file , function(err,data){ 
 /* 
  一参为文件路径 
  二参为回调函数 
   回调函数的一参为读取错误返回的信息,返回空就没有错误 
   二参为读取成功返回的文本内容 
 */ 
  if(err){ 
   //HTTP 状态码 404 : NOT FOUND 
   //Content Type:text/plain 
   res.writeHeader(404,{ 
    'content-type' : 'text/html;charset="utf-8"' 
   }); 
   res.write('<h1>404错误</h1><p>你要找的页面不存在</p>'); 
   res.end(); 
  }else{ 
   //HTTP 状态码 200 : OK 
   //Content Type:text/plain 
   res.writeHeader(200,{ 
    'content-type' : 'text/html;charset="utf-8"' 
   }); 
   res.write(data);//将index.html显示在客户端 
   res.end(); 
  } 
 }); 
}).listen(8888); 
console.log('服务器开启成功');

通过上面代码,我们就能够实现服务器对于文件的查找,下面,我们就进行创建一个html文件,然后通过浏览器进行访问。

2、编写html文件(index.html),用于浏览器进行请求

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>index</title> 
</head> 
<body> 
 这是一个用于进行nodejs服务器测试的html文件,通过在浏览器上面输入 
 http://127.0.0.1:8888/index.html(自己所建的项目名)进行访问 
</body> 
</html>

3、进行测试

    (1) 首先我们启动服务器,打开cmd,找到项目所在位置,然后输入命令node server.js启动服务器

    (2) 在浏览器进行访问,在url栏中输入http://127.0.0.1:888/index.html

如果对应页面显示出来就证明你成功了。接下来我将介绍nodejs快速搭建本地服务,也就是我说的第二种方法。

二、使用nodejs快速搭建本地服务

注:node.js 的anywhere就是随时随地将你的当前目录变成一个静态文件服务器的根目录

1、首先打开cmd,输入node -v检测你确定你是否安装好了node.js,然后输入命令npm install angwhere -g,进行安装静态文件服务器,安装完如下图显示:

nodejs搭建本地服务器轻松解决跨域问题

2、在cmd页面 找到你想搭建服务器的路径

3、然后再当前路径下输入: anywhere 8888  如下图显示

nodejs搭建本地服务器轻松解决跨域问题

4、回车后,浏览器就自动打开本地访问网址,一个简单的node服务器就这样被我们搭建好啦!

总结

以上所述是小编给大家介绍的nodejs搭建本地服务器轻松解决跨域问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

NodeJs 相关文章推荐
提高NodeJS中SSL服务的性能
Jul 15 NodeJs
nodejs命令行参数处理模块commander使用实例
Sep 17 NodeJs
Nodejs极简入门教程(二):定时器
Oct 25 NodeJs
nodejs微信公众号支付开发
Sep 19 NodeJs
利用nodejs监控文件变化并使用sftp上传到服务器
Feb 18 NodeJs
NodeJS基础API搭建服务器详细过程记录
Apr 01 NodeJs
使用 NodeJS+Express 开发服务端的简单介绍
Apr 07 NodeJs
关于Mac下安装nodejs、npm和cnpm的教程
Apr 11 NodeJs
webstorm中配置nodejs环境及npm的实例
May 15 NodeJs
nodejs之koa2请求示例(GET,POST)
Aug 07 NodeJs
nodejs高大上的部署方式(PM2)
Sep 11 NodeJs
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
Feb 06 NodeJs
nodejs中密码加密处理操作详解
Mar 20 #NodeJs
nodejs连接mysql数据库及基本知识点详解
Mar 20 #NodeJs
nodejs基于express实现文件上传的方法
Mar 19 #NodeJs
nodejs+mongodb aggregate级联查询操作示例
Mar 17 #NodeJs
nodejs实现超简单生成二维码的方法
Mar 17 #NodeJs
NodeJS父进程与子进程资源共享原理与实现方法
Mar 16 #NodeJs
NodeJS实现不可逆加密与密码密文保存的方法
Mar 16 #NodeJs
You might like
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
python爬取酷狗音乐排行榜
2019/02/20 Python
linux安装python修改默认python版本方法
2019/03/31 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Python换行与不换行的输出实例
2020/02/19 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
python爬取youtube视频的示例代码
2021/03/03 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
abstract是什么意思
2012/02/12 面试题
EJB与JAVA BEAN的区别
2016/08/29 面试题
学校四群教育实施方案
2014/06/12 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
春风化雨观后感
2015/06/11 职场文书
SQL Server内存机制浅探
2022/04/06 SQL Server