解决跨域的方式有很多种,本篇主要介绍 CORS :
CORS 全称是"跨域资源共享"(Cross-origin resource sharing)。
CORS需要浏览器和服务器同时支持。但是目前基本上浏览器都支持,所以我们只要保证服务器端服务器实现了 CORS 接口,就可以跨源通信。
在数据包的头部配置Access-Control-Allow-Origin字段以后,数据包发送给浏览器后,
浏览器就会根据这里配置的白名单 "放行" 允许白名单的服务器对应的网页来用ajax跨域访问 。
CORS解决跨域问题,就是在服务器端给响应添加头信息。
Access-Control-Allow-Origin 允许请求的域
Access-Control-Allow-Methods 允许请求的方法
Access-Control-Allow-Headers 预检请求后,告知发送请求需要有的头部
Access-Control-Allow-Credentials 表示是否允许发送cookie,默认false;
Access-Control-Max-Age 本次预检的有效期,单位:秒;
router.js文件夹:
- var fs=require("fs")
- var url=require("url")
- var querysting=require("querystring")
- var mime=require("mime")
- let urls={}
- var http=require("http")
-
- let router=function(req,res){
- //这个函数每次用户访问时运行
- let pathname=url.parse(req.url).pathname
- fs.readFile(router.basepath+pathname,(err,data)=>{
- if(!err){
- res.setHeader("content-Type",mime.getType(pathname))
- res.end(data)
- }else{
- if(!urls[pathname]){res.end("404 not found-mymvc")}
- else{urls[pathname](req,res)}
- }
- })
- }
- router.static=function(path){
- this.basepath=path
- }
-
- router.get=function(url,cb){
- urls[url]=cb
- }
- router.basepath=__dirname+"/public"
- http.createServer(router).listen(8081)
- module.exports=router;
test1文件夹中的index.js文件:
- var router = require("./router.js")
-
- router.get("/ajax1",function(req,res) {
- res.end('{"name":"xiaozhang","age":21}')
- })
test2文件夹中public文件夹中的index.html文件:
-
-
- <script>
-
- function fn() {
- var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP")
- xhr.open("GET","http://192.168.0.114:8081/ajax1",true)
- xhr.send()
- xhr.onreadystatechange = function() {
- if (xhr.readyState == 4 && xhr.status == 200) {
- console.log(xhr.responseText);
- }
- }
-
- }
-
- script>
未设置CORS时,会报跨域错误:

在test1的index.js文件中设置CORS后就可以访问到数据:
- var router = require("./router.js")
-
- router.get("/ajax1",function(req,res) {
- res.setHeader("Access-Control-Allow-Origin","http://192.168.0.114:8082")
- res.end('{"name":"xiaozhang","age":21}')
- })
