最近把以前用 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, 进行安装静态文件服务器, 安装完如下图显示:
2 在 cmd 页面 找到你想搭建服务器的路径
3 然后再当前路径下输入: anywhere 8888 如下图显示
4 回车后, 浏览器就自动打开本地访问网址, 一个简单的 node 服务器就这样被我们搭建好啦!
总结
以上所述是小编给大家介绍的 nodejs 搭建本地服务器轻松解决跨域问题, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/136859.htm