nodejs builds a local server to handle cross-domain-JS Tutorial-php.cn

nodejs builds a local server to handle cross-domain

php中世界最好的语言

Release： 2018-05-09 10:21:12

Original

1805 people have browsed it

This time I will bring you nodejs to build a local server to handle cross-domain, and nodejs to build a local server to handle cross-domain. What are the precautions?The following is a practical case, let's take a look.

Recently I took out a small demo written with jquery and ran it. At the beginning, I forgot to enable the local service, causing the console to keep reporting XMLHttpRequest cannot load file:///C :/Users/79883/Desktop/ajax/data.json?{"username":"lcl@qq.com","pwd":"Home20170702"}. 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. Then I started writing it myself server.js server, during the process, I felt that this method was quite troublesome, so I kept trying other methods, such as changing browser properties, etc., but none of them solved the cross-domain problem. In the end, I came to two conclusions: This is an effective way. Here I will introduce these two methods to you.

1. Use Node to create a Web server

Note: Node.js provides the http module, which is mainly used to build HTTP servers. and client, the following is a simple server implementation process:

1. Write the server code 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('服务器开启成功');

Copy after login

Through the above code, we can implement the server for files Search, below, we will create an html file, and then access it through the browser.

2. Write the html file (index.html) for the browser to make requests

<!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>

Copy after login

3. Test

(1) First we start the server, open cmd, find the location of the project, and then enter the command node server.js to start the server

(2) To access in the browser, enter http:/ in the url bar /127.0.0.1:888/index.html

If the corresponding page is displayed, it proves that you are successful. Next, I will introduce nodejs to quickly build local services, which is the second method I mentioned.

2. Use nodejs to quickly build local services

Note: node.js’ anywhere is to turn your current directory into a The root directory of the static file server

1. First open cmd, enter node -v to check whether you have installed node.js, and then enter the command npm install angwhere -g to install the static file server. Install The picture is shown below:

2. Find the path you want to build the server on the cmd page

3, and then enter in the current path: anywhere 8888 as follows The picture shows

4. After pressing Enter, the browser will automatically open the local access URL, and a simple node server has been set up by us!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!