前端跨域之html5 XMLHttpRequest Level2

前端代码

var xhr=new XMLHttpRequest();
    xhr.open('POST','http://127.0.0.1:8081/ceshi',true);
    xhr.onreadystatechange=function(){
      if(xhr.readyState==4){//响应完毕后
        if(xhr.status==200){//http状态码为200时
            var result=xhr.responseText;//获取ajax请求的文本内容
            console.log(result);
        }
      }
    }
    xhr.setRequestHeader("Content-Type","application/json")
    var a={name:123,data:"sss"};
    var b=JSON.stringify(a);
    xhr.send(b)
    }
//此处有两个坑
//坑1：有些ajax类库中的代码会影响服务器跨域设置
http://www.cnblogs.com/daishuguang/p/3971989.html
//坑2：如果设置Content-Type为application/json那么在服务端需要设置
//res.header("Access-Control-Allow-Headers", "Content-Type");
//并且请求会发送两次，因为在跨域的时候，除了contentType为application/x-www-form-urlencoded, multipart/form-data或者text/plain外，都会触发浏览器先发送方法为OPTIONS的请求。比如说，你原来的请求是方法方法POST，如果第一个请求返回的结果Header中的Allow属性并没有POST方法，
那么第二个请求是不会发送的，此时浏览器控制台会报错，告诉你POST方法并不被服务器支持。

　　服务器代码 此处采用node.js为例

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
// var urlencodedParser = bodyParser.urlencoded({ extended: false })
	
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Headers", "Content-Type");
    res.header("Access-Control-Allow-Methods","POST,PUT,GET,DELETE,OPTIONS");
    res.header("Access-Control-Allow-Origin", "*");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});
	app.use(bodyParser.json());
	app.use(bodyParser.urlencoded({extended: false}))
app.get('/', function (req, res) {
	console.log("你好啊")
   res.send('Hello World');
})
app.post('/ceshi',function(req,res){
	console.log(req.body)
	res.send("nihao")
})
var server = app.listen(8081, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("服务器启动成功", host, port)

})

　　参考文章http://www.jianshu.com/p/fddd19669ab3

转载于:https://www.cnblogs.com/hangaoke/p/6260702.html